<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>风格指南 | Vue.js</title>
    <meta name="generator" content="VuePress 1.8.0">
    <link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="icon" href="/logo.png">
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/images/icons/apple-icon-152x152.png">
    <script src="https://player.youku.com/iframeapi"></script>
    <meta name="description" content="Vue.js - The 渐进式 JavaScript 框架">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
    <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="/assets/css/0.styles.dbd5a077.css" as="style"><link rel="preload" href="/assets/js/app.8e9a370d.js" as="script"><link rel="preload" href="/assets/js/11.282d7961.js" as="script"><link rel="preload" href="/assets/js/33.5e981f72.js" as="script"><link rel="preload" href="/assets/js/22.0b365510.js" as="script"><link rel="prefetch" href="/assets/js/1.68d5ca75.js"><link rel="prefetch" href="/assets/js/100.e9ca97cb.js"><link rel="prefetch" href="/assets/js/101.bde08412.js"><link rel="prefetch" href="/assets/js/102.de4df251.js"><link rel="prefetch" href="/assets/js/103.a7e77998.js"><link rel="prefetch" href="/assets/js/104.bcb1d675.js"><link rel="prefetch" href="/assets/js/105.e433ec30.js"><link rel="prefetch" href="/assets/js/106.cce18a4f.js"><link rel="prefetch" href="/assets/js/107.b4b07388.js"><link rel="prefetch" href="/assets/js/108.b839e5aa.js"><link rel="prefetch" href="/assets/js/109.36fbdd83.js"><link rel="prefetch" href="/assets/js/110.973c3515.js"><link rel="prefetch" href="/assets/js/111.f6de6497.js"><link rel="prefetch" href="/assets/js/112.01569df8.js"><link rel="prefetch" href="/assets/js/113.6a3748b2.js"><link rel="prefetch" href="/assets/js/114.e98d382e.js"><link rel="prefetch" href="/assets/js/115.1e1c5889.js"><link rel="prefetch" href="/assets/js/116.f02cbdf7.js"><link rel="prefetch" href="/assets/js/117.0416f584.js"><link rel="prefetch" href="/assets/js/118.6f3e5b86.js"><link rel="prefetch" href="/assets/js/119.39bbe5d8.js"><link rel="prefetch" href="/assets/js/12.8ce387e5.js"><link rel="prefetch" href="/assets/js/120.7b14cee5.js"><link rel="prefetch" href="/assets/js/121.d204ab46.js"><link rel="prefetch" href="/assets/js/122.89d04b6b.js"><link rel="prefetch" href="/assets/js/123.9fce5790.js"><link rel="prefetch" href="/assets/js/124.32117a20.js"><link rel="prefetch" href="/assets/js/125.7790c8fb.js"><link rel="prefetch" href="/assets/js/126.346e0c66.js"><link rel="prefetch" href="/assets/js/127.90aecff9.js"><link rel="prefetch" href="/assets/js/128.b310aae3.js"><link rel="prefetch" href="/assets/js/129.a541baa4.js"><link rel="prefetch" href="/assets/js/13.7ecb88c4.js"><link rel="prefetch" href="/assets/js/130.d8a83203.js"><link rel="prefetch" href="/assets/js/131.8f77a918.js"><link rel="prefetch" href="/assets/js/132.69dd48f6.js"><link rel="prefetch" href="/assets/js/133.1a17c435.js"><link rel="prefetch" href="/assets/js/134.1daf7963.js"><link rel="prefetch" href="/assets/js/135.bfe5dd93.js"><link rel="prefetch" href="/assets/js/136.7b9e2494.js"><link rel="prefetch" href="/assets/js/137.774f5233.js"><link rel="prefetch" href="/assets/js/138.5b9c62da.js"><link rel="prefetch" href="/assets/js/139.ea828073.js"><link rel="prefetch" href="/assets/js/14.1e94d35c.js"><link rel="prefetch" href="/assets/js/140.eb5d606e.js"><link rel="prefetch" href="/assets/js/141.74f9ddd6.js"><link rel="prefetch" href="/assets/js/142.e6a6c183.js"><link rel="prefetch" href="/assets/js/143.a862768e.js"><link rel="prefetch" href="/assets/js/144.11e984d3.js"><link rel="prefetch" href="/assets/js/145.5a2b45fa.js"><link rel="prefetch" href="/assets/js/146.11a6e459.js"><link rel="prefetch" href="/assets/js/147.2d731ce5.js"><link rel="prefetch" href="/assets/js/148.10b05806.js"><link rel="prefetch" href="/assets/js/149.dbd18e85.js"><link rel="prefetch" href="/assets/js/15.5f97d7d3.js"><link rel="prefetch" href="/assets/js/150.5d29b06e.js"><link rel="prefetch" href="/assets/js/151.f95a5312.js"><link rel="prefetch" href="/assets/js/152.6356d359.js"><link rel="prefetch" href="/assets/js/153.048fb9f5.js"><link rel="prefetch" href="/assets/js/154.b696a927.js"><link rel="prefetch" href="/assets/js/155.cbab8e0c.js"><link rel="prefetch" href="/assets/js/156.8b6dfeaa.js"><link rel="prefetch" href="/assets/js/157.ddb9630f.js"><link rel="prefetch" href="/assets/js/158.8830bcae.js"><link rel="prefetch" href="/assets/js/159.73f9805a.js"><link rel="prefetch" href="/assets/js/16.99f0a46f.js"><link rel="prefetch" href="/assets/js/160.81d6e578.js"><link rel="prefetch" href="/assets/js/161.4a54be2a.js"><link rel="prefetch" href="/assets/js/162.b9e2a680.js"><link rel="prefetch" href="/assets/js/163.aa4320f9.js"><link rel="prefetch" href="/assets/js/164.ba76b659.js"><link rel="prefetch" href="/assets/js/165.1de3781c.js"><link rel="prefetch" href="/assets/js/17.1e50c7c0.js"><link rel="prefetch" href="/assets/js/18.c8e6d35f.js"><link rel="prefetch" href="/assets/js/19.6ac0efff.js"><link rel="prefetch" href="/assets/js/2.15e48903.js"><link rel="prefetch" href="/assets/js/20.22b01ff8.js"><link rel="prefetch" href="/assets/js/21.61e0ef7d.js"><link rel="prefetch" href="/assets/js/23.d257648d.js"><link rel="prefetch" href="/assets/js/24.2c5ca951.js"><link rel="prefetch" href="/assets/js/25.443a2cc7.js"><link rel="prefetch" href="/assets/js/26.4aebfb8c.js"><link rel="prefetch" href="/assets/js/27.44432e12.js"><link rel="prefetch" href="/assets/js/28.a1381a73.js"><link rel="prefetch" href="/assets/js/29.ea6a347d.js"><link rel="prefetch" href="/assets/js/3.5a036bb1.js"><link rel="prefetch" href="/assets/js/30.672c3d59.js"><link rel="prefetch" href="/assets/js/31.cd576b97.js"><link rel="prefetch" href="/assets/js/32.f82869d3.js"><link rel="prefetch" href="/assets/js/34.e5c4e496.js"><link rel="prefetch" href="/assets/js/35.34f44353.js"><link rel="prefetch" href="/assets/js/36.e6d3f5ae.js"><link rel="prefetch" href="/assets/js/37.f1486fb3.js"><link rel="prefetch" href="/assets/js/38.f7479caa.js"><link rel="prefetch" href="/assets/js/39.b7040bfe.js"><link rel="prefetch" href="/assets/js/4.28e546d1.js"><link rel="prefetch" href="/assets/js/40.5c7a2259.js"><link rel="prefetch" href="/assets/js/41.d12114b6.js"><link rel="prefetch" href="/assets/js/42.c5619795.js"><link rel="prefetch" href="/assets/js/43.1aa3e372.js"><link rel="prefetch" href="/assets/js/44.8acfbe38.js"><link rel="prefetch" href="/assets/js/45.8b1b0f30.js"><link rel="prefetch" href="/assets/js/46.afc40541.js"><link rel="prefetch" href="/assets/js/47.e07b3e77.js"><link rel="prefetch" href="/assets/js/48.ab49e1e2.js"><link rel="prefetch" href="/assets/js/49.85bbd96a.js"><link rel="prefetch" href="/assets/js/5.ee0f2808.js"><link rel="prefetch" href="/assets/js/50.afaeaf27.js"><link rel="prefetch" href="/assets/js/51.6164767c.js"><link rel="prefetch" href="/assets/js/52.6b354c7b.js"><link rel="prefetch" href="/assets/js/53.8e7f9b46.js"><link rel="prefetch" href="/assets/js/54.875869bf.js"><link rel="prefetch" href="/assets/js/55.67228c1b.js"><link rel="prefetch" href="/assets/js/56.7be74d38.js"><link rel="prefetch" href="/assets/js/57.cfe3ab1d.js"><link rel="prefetch" href="/assets/js/58.ca0d6e81.js"><link rel="prefetch" href="/assets/js/59.b470025e.js"><link rel="prefetch" href="/assets/js/6.687624bc.js"><link rel="prefetch" href="/assets/js/60.59c62dd5.js"><link rel="prefetch" href="/assets/js/61.bee6f9f3.js"><link rel="prefetch" href="/assets/js/62.35a0754d.js"><link rel="prefetch" href="/assets/js/63.5a8376a0.js"><link rel="prefetch" href="/assets/js/64.f23f42f8.js"><link rel="prefetch" href="/assets/js/65.be1ec638.js"><link rel="prefetch" href="/assets/js/66.7998f627.js"><link rel="prefetch" href="/assets/js/67.d0395c0d.js"><link rel="prefetch" href="/assets/js/68.2f3fdf70.js"><link rel="prefetch" href="/assets/js/69.9aa702b9.js"><link rel="prefetch" href="/assets/js/7.ccd8a671.js"><link rel="prefetch" href="/assets/js/70.68d38a8b.js"><link rel="prefetch" href="/assets/js/71.688d1f43.js"><link rel="prefetch" href="/assets/js/72.c3da244d.js"><link rel="prefetch" href="/assets/js/73.62019e76.js"><link rel="prefetch" href="/assets/js/74.55f11e97.js"><link rel="prefetch" href="/assets/js/75.28f7a410.js"><link rel="prefetch" href="/assets/js/76.aea5fcac.js"><link rel="prefetch" href="/assets/js/77.767ba849.js"><link rel="prefetch" href="/assets/js/78.867989b0.js"><link rel="prefetch" href="/assets/js/79.18c04aab.js"><link rel="prefetch" href="/assets/js/80.d9ab8e04.js"><link rel="prefetch" href="/assets/js/81.c1b96691.js"><link rel="prefetch" href="/assets/js/82.b423128a.js"><link rel="prefetch" href="/assets/js/83.18e205da.js"><link rel="prefetch" href="/assets/js/84.029c6d49.js"><link rel="prefetch" href="/assets/js/85.d7c00a92.js"><link rel="prefetch" href="/assets/js/86.92a5416c.js"><link rel="prefetch" href="/assets/js/87.6bd41202.js"><link rel="prefetch" href="/assets/js/88.5fd01128.js"><link rel="prefetch" href="/assets/js/89.2da78840.js"><link rel="prefetch" href="/assets/js/90.0c5a649e.js"><link rel="prefetch" href="/assets/js/91.4daf663c.js"><link rel="prefetch" href="/assets/js/92.dc5800e2.js"><link rel="prefetch" href="/assets/js/93.4a77cabe.js"><link rel="prefetch" href="/assets/js/94.83769b9e.js"><link rel="prefetch" href="/assets/js/95.0388d28f.js"><link rel="prefetch" href="/assets/js/96.dacf6b86.js"><link rel="prefetch" href="/assets/js/97.dbba77db.js"><link rel="prefetch" href="/assets/js/98.5550b50a.js"><link rel="prefetch" href="/assets/js/99.b619ae82.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.4b3b21bf.js"><link rel="prefetch" href="/assets/js/vendors~search-page.c3322d91.js">
    <link rel="stylesheet" href="/assets/css/0.styles.dbd5a077.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container vuemastery-promo"><div id="vm-banner" role="banner" class="vuemastery-banner hide"><div class="vuemastery-planet"></div> <a href="https://www.vuemastery.com/black-friday-2020" target="_blank" class="vuemastery-banner--link"><img src="/images/vuemastery/logo-vuemastery.svg" alt="vuemastery" class="vuemastery-banner--logo"> <div class="vuemastery-banner--wrapper"><p><span>Vue Mastery's Black Friday Sale:</span>Save 50% off a year of Vue courses</p> <button class="vuemastery-button">Get discount</button></div></a> <div class="vuemastery-banner--close"></div></div> <header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue.js" class="logo"> <span class="site-name can-hide">Vue.js</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档菜单" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide/introduction.html" class="nav-link">
  教程
</a></li><li class="dropdown-item"><!----> <a href="/style-guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  风格指南
</a></li><li class="dropdown-item"><!----> <a href="/cookbook/" class="nav-link">
  Cookbook
</a></li><li class="dropdown-item"><!----> <a href="/examples/markdown.html" class="nav-link">
  示例
</a></li><li class="dropdown-item"><!----> <a href="/guide/contributing/writing-guide.html" class="nav-link">
  贡献文档
</a></li><li class="dropdown-item"><!----> <a href="/guide/migration/introduction.html" class="nav-link">
  v3 迁移指南
</a></li></ul></div></div><div class="nav-item"><a href="/api/" class="nav-link">
  API 参考
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="生态系统" class="dropdown-title"><span class="title">生态系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          社区
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/community/team/" class="nav-link">
  团队
</a></li><li class="dropdown-subitem"><a href="/community/partners.html" class="nav-link">
  合作伙伴
</a></li><li class="dropdown-subitem"><a href="/community/join/" class="nav-link">
  加入
</a></li><li class="dropdown-subitem"><a href="/community/themes/" class="nav-link">
  主题
</a></li></ul></li><li class="dropdown-item"><h4>
          官方项目
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://next.router.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://next.vuex.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://cli.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue CLI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vuejs.github.io/vue-test-utils-next-docs/guide/introduction.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Test Utils
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/vuejs/vue-devtools" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Devtools
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://news.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Weekly news
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="支持 Vue" class="dropdown-title"><span class="title">支持 Vue</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/support-vuejs/#one-time-donations" class="nav-link">
  一次性捐款
</a></li><li class="dropdown-item"><!----> <a href="/support-vuejs/#recurring-pledges" class="nav-link">
  周期性捐款
</a></li><li class="dropdown-item"><!----> <a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  贴纸
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://osholic.com/?utm_source=vue&amp;utm_medium=dropdown" target="_blank" rel="noopener noreferrer" class="nav-link external">
  周边
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vue.threadless.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  T-Shirt 商店
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="多语言" class="dropdown-title"><span class="title">多语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://v3.vuejs.org" target="_blank" rel="noopener noreferrer" class="nav-link external">
  English
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <a href="https://github.com/vuejs/docs-next-zh-cn" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <div id="docsearch"></div></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档菜单" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide/introduction.html" class="nav-link">
  教程
</a></li><li class="dropdown-item"><!----> <a href="/style-guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  风格指南
</a></li><li class="dropdown-item"><!----> <a href="/cookbook/" class="nav-link">
  Cookbook
</a></li><li class="dropdown-item"><!----> <a href="/examples/markdown.html" class="nav-link">
  示例
</a></li><li class="dropdown-item"><!----> <a href="/guide/contributing/writing-guide.html" class="nav-link">
  贡献文档
</a></li><li class="dropdown-item"><!----> <a href="/guide/migration/introduction.html" class="nav-link">
  v3 迁移指南
</a></li></ul></div></div><div class="nav-item"><a href="/api/" class="nav-link">
  API 参考
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="生态系统" class="dropdown-title"><span class="title">生态系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          社区
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/community/team/" class="nav-link">
  团队
</a></li><li class="dropdown-subitem"><a href="/community/partners.html" class="nav-link">
  合作伙伴
</a></li><li class="dropdown-subitem"><a href="/community/join/" class="nav-link">
  加入
</a></li><li class="dropdown-subitem"><a href="/community/themes/" class="nav-link">
  主题
</a></li></ul></li><li class="dropdown-item"><h4>
          官方项目
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://next.router.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://next.vuex.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://cli.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue CLI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vuejs.github.io/vue-test-utils-next-docs/guide/introduction.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Test Utils
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/vuejs/vue-devtools" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Devtools
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://news.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Weekly news
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="支持 Vue" class="dropdown-title"><span class="title">支持 Vue</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/support-vuejs/#one-time-donations" class="nav-link">
  一次性捐款
</a></li><li class="dropdown-item"><!----> <a href="/support-vuejs/#recurring-pledges" class="nav-link">
  周期性捐款
</a></li><li class="dropdown-item"><!----> <a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  贴纸
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://osholic.com/?utm_source=vue&amp;utm_medium=dropdown" target="_blank" rel="noopener noreferrer" class="nav-link external">
  周边
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vue.threadless.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  T-Shirt 商店
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="多语言" class="dropdown-title"><span class="title">多语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://v3.vuejs.org" target="_blank" rel="noopener noreferrer" class="nav-link external">
  English
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <a href="https://github.com/vuejs/docs-next-zh-cn" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>风格指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/style-guide/#规则类别" class="sidebar-link">规则类别</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/style-guide/#优先级-a-必要的" class="sidebar-link">优先级 A：必要的</a></li><li class="sidebar-sub-header"><a href="/style-guide/#优先级-b-强烈推荐" class="sidebar-link">优先级 B：强烈推荐</a></li><li class="sidebar-sub-header"><a href="/style-guide/#优先级-c-推荐" class="sidebar-link">优先级 C：推荐</a></li><li class="sidebar-sub-header"><a href="/style-guide/#优先级-d-谨慎使用" class="sidebar-link">优先级 D：谨慎使用</a></li></ul></li><li><a href="/style-guide/#优先级-a-的规则-必要的-规避错误" class="sidebar-link">优先级 A 的规则：必要的</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/style-guide/#组件名为多个单词必要" class="sidebar-link">组件名为多个单词</a></li><li class="sidebar-sub-header"><a href="/style-guide/#prop-定义必要" class="sidebar-link">Prop 定义</a></li><li class="sidebar-sub-header"><a href="/style-guide/#为-v-for-设置-key-值必要" class="sidebar-link">为 v-for 设置 key 值</a></li><li class="sidebar-sub-header"><a href="/style-guide/#避免-v-if-和-v-for-一起使用必要" class="sidebar-link">避免 v-if 和 v-for 一起使用</a></li><li class="sidebar-sub-header"><a href="/style-guide/#为组件样式设置作用域必要" class="sidebar-link">为组件样式设置作用域</a></li><li class="sidebar-sub-header"><a href="/style-guide/#私有-property-名称必要" class="sidebar-link">私有 property 名称</a></li></ul></li><li><a href="/style-guide/#优先级-b-的规则-强烈推荐-增强代码可读性" class="sidebar-link">优先级 B 的规则：强烈推荐</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/style-guide/#组件文件强烈推荐" class="sidebar-link">组件文件</a></li><li class="sidebar-sub-header"><a href="/style-guide/#单文件组件文件的大小写强烈推荐" class="sidebar-link">单文件组件文件的大小写</a></li><li class="sidebar-sub-header"><a href="/style-guide/#基础组件名称强烈推荐" class="sidebar-link">基础组件名称</a></li><li class="sidebar-sub-header"><a href="/style-guide/#单组件名称强烈推荐" class="sidebar-link">单组件名称</a></li><li class="sidebar-sub-header"><a href="/style-guide/#紧密耦合的组件名称强烈推荐" class="sidebar-link">紧密耦合的组件名称</a></li><li class="sidebar-sub-header"><a href="/style-guide/#组件名称中的单词顺序强烈推荐" class="sidebar-link">组件名称中的单词顺序</a></li><li class="sidebar-sub-header"><a href="/style-guide/#自闭合组件强烈推荐" class="sidebar-link">自闭合组件</a></li><li class="sidebar-sub-header"><a href="/style-guide/#模板中的组件名称大小写强烈推荐" class="sidebar-link">模板中的组件名称大小写</a></li><li class="sidebar-sub-header"><a href="/style-guide/#js-jsx-中使用的组件名称强烈推荐" class="sidebar-link">JS/JSX 中使用的组件名称</a></li><li class="sidebar-sub-header"><a href="/style-guide/#完整单词的组件名称强烈推荐" class="sidebar-link">完整单词的组件名称</a></li><li class="sidebar-sub-header"><a href="/style-guide/#prop-名称强烈推荐" class="sidebar-link">Prop 名称</a></li><li class="sidebar-sub-header"><a href="/style-guide/#多个-attribute-的元素强烈推荐" class="sidebar-link">多个 attribute 的元素</a></li><li class="sidebar-sub-header"><a href="/style-guide/#模板中的简单表达式强烈推荐" class="sidebar-link">模板中的简单表达式</a></li><li class="sidebar-sub-header"><a href="/style-guide/#简单的计算属性强烈推荐" class="sidebar-link">简单的计算属性</a></li><li class="sidebar-sub-header"><a href="/style-guide/#带引号的-attribute-值强烈推荐" class="sidebar-link">带引号的 attribute 值</a></li><li class="sidebar-sub-header"><a href="/style-guide/#指令缩写强烈推荐" class="sidebar-link">指令缩写</a></li></ul></li><li><a href="/style-guide/#优先级-c-的规则-推荐-将选择和认知成本最小化" class="sidebar-link">优先级 C 的规则：推荐</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/style-guide/#组件-实例的选项顺序推荐" class="sidebar-link">组件/实例的选项顺序</a></li><li class="sidebar-sub-header"><a href="/style-guide/#元素-attribute-的顺序推荐" class="sidebar-link">元素 attribute 的顺序</a></li><li class="sidebar-sub-header"><a href="/style-guide/#组件-实例选项中的空行推荐" class="sidebar-link">组件/实例选项中的空行</a></li><li class="sidebar-sub-header"><a href="/style-guide/#单文件组件的顶级元素的顺序推荐" class="sidebar-link">单文件组件的顶级元素的顺序</a></li></ul></li><li><a href="/style-guide/#优先级-d-的规则-谨慎使用-潜在风险" class="sidebar-link">优先级 D 的规则：谨慎使用</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/style-guide/#scoped-中的元素选择器谨慎使用" class="sidebar-link">scoped 中的元素选择器</a></li><li class="sidebar-sub-header"><a href="/style-guide/#隐性的父子组件通信谨慎使用" class="sidebar-link">隐性的父子组件通信</a></li><li class="sidebar-sub-header"><a href="/style-guide/#非-flux-的全局状态管理谨慎使用" class="sidebar-link">非 Flux 的全局状态管理</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default" data-v-3d5d9371 data-v-3d5d9371><h1 id="风格指南" data-v-3d5d9371><a href="#风格指南" class="header-anchor" data-v-3d5d9371>#</a> 风格指南</h1> <p data-v-3d5d9371>这里是官方的 Vue 特有代码的风格指南。如果在工程中使用 Vue，为了回避错误、小纠结和反模式，该指南是份不错的参考。不过我们也不确信风格指南的所有内容对于所有的团队或工程都是理想的。所以根据过去的经验、周边的技术栈、个人价值观做出有意义的偏差是可取的。</p> <p data-v-3d5d9371>对于其绝大部分，我们也总体上避免就 JavaScript 或 HTML 的本身提出建议。我们不介意你是否使用分号或结尾的逗号。我们不介意你在 HTML attribute 中使用单引号还是双引号。不过当我们发现在 Vue 的情景下有帮助的特定模式时，也会存在例外。</p> <p data-v-3d5d9371>最终，我们把所有的规则归为了四个大类：</p> <h2 id="规则类别" data-v-3d5d9371><a href="#规则类别" class="header-anchor" data-v-3d5d9371>#</a> 规则类别</h2> <h3 id="优先级-a-必要的" data-v-3d5d9371><a href="#优先级-a-必要的" class="header-anchor" data-v-3d5d9371>#</a> 优先级 A：必要的</h3> <p data-v-3d5d9371>这些规则会帮你规避错误，所以学习并接受它们带来的全部代价吧。这里面可能存在例外，但应该非常少，且只有你同时精通 JavaScript 和 Vue 才可以这样做。</p> <h3 id="优先级-b-强烈推荐" data-v-3d5d9371><a href="#优先级-b-强烈推荐" class="header-anchor" data-v-3d5d9371>#</a> 优先级 B：强烈推荐</h3> <p data-v-3d5d9371>这些规则能够在绝大多数工程中改善可读性和开发体验。即使你违反了，代码还是能照常运行，但例外应该尽可能少且有合理的理由。</p> <h3 id="优先级-c-推荐" data-v-3d5d9371><a href="#优先级-c-推荐" class="header-anchor" data-v-3d5d9371>#</a> 优先级 C：推荐</h3> <p data-v-3d5d9371>当存在多个同样好的选项，选任意一个都可以确保一致性。在这些规则里，我们描述了每个选项并建议一个默认的选择。也就是说只要保持一致且理由充分，你可以随意在你的代码库中做出不同的选择。请务必给出一个好的理由！通过接受社区的标准，你将会：</p> <ol data-v-3d5d9371><li data-v-3d5d9371>训练你的大脑，以便更容易的处理你在社区遇到的代码；</li> <li data-v-3d5d9371>不做修改就可以直接复制粘贴社区的代码示例；</li> <li data-v-3d5d9371>能够经常招聘到和你编码习惯相同的新人，至少跟 Vue 相关的东西是这样的。</li></ol> <h3 id="优先级-d-谨慎使用" data-v-3d5d9371><a href="#优先级-d-谨慎使用" class="header-anchor" data-v-3d5d9371>#</a> 优先级 D：谨慎使用</h3> <p data-v-3d5d9371>有些 Vue 特性的存在是为了照顾极端情况或帮助老代码的平稳迁移。当被过度使用时，这些特性会让你的代码难于维护甚至变成 bug 的来源。这些规则是为了给有潜在风险的特性敲个警钟，并说明它们什么时候不应该使用以及为什么。</p> <h2 id="优先级-a-的规则-必要的-规避错误" data-v-3d5d9371><a href="#优先级-a-的规则-必要的-规避错误" class="header-anchor" data-v-3d5d9371>#</a> 优先级 A 的规则：必要的 <span class="hide-from-sidebar" data-v-3d5d9371>(规避错误)</span></h2> <h3 id="组件名为多个单词必要" data-v-3d5d9371><a href="#组件名为多个单词必要" class="header-anchor" data-v-3d5d9371>#</a> 组件名为多个单词<sup data-p="a" data-v-3d5d9371>必要</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>组件名应该始终是多个单词的，根组件 <code data-v-3d5d9371>App</code> 以及 <code data-v-3d5d9371>&lt;transition&gt;</code>、<code data-v-3d5d9371>&lt;component&gt;</code> 之类的 Vue 内置组件除外。</strong></p> <p data-v-3d5d9371>这样做可以避免跟现有的以及未来的 HTML 元素<a href="http://w3c.github.io/webcomponents/spec/custom/#valid-custom-element-name" target="_blank" rel="noopener noreferrer" data-v-3d5d9371>相冲突<span data-v-3d5d9371><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，因为所有的 HTML 元素名称都是单个单词的。</p> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371>app<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>component</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>'todo'</span><span class="token punctuation" data-v-3d5d9371>,</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
<span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371></div></div><div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token keyword" data-v-3d5d9371>export</span> <span class="token keyword" data-v-3d5d9371>default</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  name<span class="token operator" data-v-3d5d9371>:</span> <span class="token string" data-v-3d5d9371>'Todo'</span><span class="token punctuation" data-v-3d5d9371>,</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371>app<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>component</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>'todo-item'</span><span class="token punctuation" data-v-3d5d9371>,</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
<span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371></div></div><div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token keyword" data-v-3d5d9371>export</span> <span class="token keyword" data-v-3d5d9371>default</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  name<span class="token operator" data-v-3d5d9371>:</span> <span class="token string" data-v-3d5d9371>'TodoItem'</span><span class="token punctuation" data-v-3d5d9371>,</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div></div> <h3 id="prop-定义必要" data-v-3d5d9371><a href="#prop-定义必要" class="header-anchor" data-v-3d5d9371>#</a> Prop 定义<sup data-p="a" data-v-3d5d9371>必要</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>Prop 定义应尽量详细</strong></p> <p data-v-3d5d9371>在你提交的代码中，prop 的定义应该尽量详细，至少需要指定其类型。</p> <details class="custom-block details" data-v-3d5d9371><summary data-v-3d5d9371>详解</summary> <p data-v-3d5d9371>细致的 <a href="/guide/component-props.html#Prop-验证" data-v-3d5d9371>prop 定义</a>有两个好处：</p> <ul data-v-3d5d9371><li data-v-3d5d9371>它们写明了组件的 API，所以很容易看懂组件的用法；</li> <li data-v-3d5d9371>在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源。</li></ul></details> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>// 这样做只有开发原型系统时可以接受</span>
props<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>[</span><span class="token string" data-v-3d5d9371>'status'</span><span class="token punctuation" data-v-3d5d9371>]</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371>props<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  status<span class="token operator" data-v-3d5d9371>:</span> String
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371></div></div><div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>// 更好的例子</span>
props<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  status<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    type<span class="token operator" data-v-3d5d9371>:</span> String<span class="token punctuation" data-v-3d5d9371>,</span>
    required<span class="token operator" data-v-3d5d9371>:</span> <span class="token boolean" data-v-3d5d9371>true</span><span class="token punctuation" data-v-3d5d9371>,</span>

    <span class="token function-variable function" data-v-3d5d9371>validator</span><span class="token operator" data-v-3d5d9371>:</span> <span class="token parameter" data-v-3d5d9371>value</span> <span class="token operator" data-v-3d5d9371>=&gt;</span> <span class="token punctuation" data-v-3d5d9371>{</span>
      <span class="token keyword" data-v-3d5d9371>return</span> <span class="token punctuation" data-v-3d5d9371>[</span>
        <span class="token string" data-v-3d5d9371>'syncing'</span><span class="token punctuation" data-v-3d5d9371>,</span>
        <span class="token string" data-v-3d5d9371>'synced'</span><span class="token punctuation" data-v-3d5d9371>,</span>
        <span class="token string" data-v-3d5d9371>'version-conflict'</span><span class="token punctuation" data-v-3d5d9371>,</span>
        <span class="token string" data-v-3d5d9371>'error'</span>
      <span class="token punctuation" data-v-3d5d9371>]</span><span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>includes</span><span class="token punctuation" data-v-3d5d9371>(</span>value<span class="token punctuation" data-v-3d5d9371>)</span>
    <span class="token punctuation" data-v-3d5d9371>}</span>
  <span class="token punctuation" data-v-3d5d9371>}</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>10</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>11</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>12</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>13</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>14</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>15</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>16</span><br data-v-3d5d9371></div></div></div> <h3 id="为-v-for-设置-key-值必要" data-v-3d5d9371><a href="#为-v-for-设置-key-值必要" class="header-anchor" data-v-3d5d9371>#</a> 为 <code data-v-3d5d9371>v-for</code> 设置 key 值<sup data-p="a" data-v-3d5d9371>必要</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>总是用 <code data-v-3d5d9371>key</code> 配合 <code data-v-3d5d9371>v-for</code></strong></p> <p data-v-3d5d9371>在组件上总是必须用 <code data-v-3d5d9371>key</code> 配合 <code data-v-3d5d9371>v-for</code>，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为，比如动画中的<a href="https://bost.ocks.org/mike/constancy/" target="_blank" rel="noopener noreferrer" data-v-3d5d9371>对象固化 (object constancy)<span data-v-3d5d9371><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> ，也是一种好的做法。</p> <details class="custom-block details" data-v-3d5d9371><summary data-v-3d5d9371>详解</summary> <p data-v-3d5d9371>假设你有一个待办事项列表：</p> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token function" data-v-3d5d9371>data</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token keyword" data-v-3d5d9371>return</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    todos<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>[</span>
      <span class="token punctuation" data-v-3d5d9371>{</span>
        id<span class="token operator" data-v-3d5d9371>:</span> <span class="token number" data-v-3d5d9371>1</span><span class="token punctuation" data-v-3d5d9371>,</span>
        text<span class="token operator" data-v-3d5d9371>:</span> <span class="token string" data-v-3d5d9371>'Learn to use v-for'</span>
      <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>
      <span class="token punctuation" data-v-3d5d9371>{</span>
        id<span class="token operator" data-v-3d5d9371>:</span> <span class="token number" data-v-3d5d9371>2</span><span class="token punctuation" data-v-3d5d9371>,</span>
        text<span class="token operator" data-v-3d5d9371>:</span> <span class="token string" data-v-3d5d9371>'Learn to use key'</span>
      <span class="token punctuation" data-v-3d5d9371>}</span>
    <span class="token punctuation" data-v-3d5d9371>]</span>
  <span class="token punctuation" data-v-3d5d9371>}</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>10</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>11</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>12</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>13</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>14</span><br data-v-3d5d9371></div></div><p data-v-3d5d9371>然后你把它们按照字母顺序排序。在更新 DOM 的时候，Vue 将会优化渲染把可能的 DOM 变更降到最低。即可能删掉第一个待办事项元素，然后把它重新加回到列表的最末尾。</p> <p data-v-3d5d9371>这里的问题在于，不要删除仍然会留在 DOM 中的元素。比如你想使用 <code data-v-3d5d9371>&lt;transition-group&gt;</code> 给列表加过渡动画，或想在被渲染元素是 <code data-v-3d5d9371>&lt;input&gt;</code> 时保持聚焦。在这些情况下，为每一个项目添加一个唯一的键值 (比如 <code data-v-3d5d9371>:key=&quot;todo.id&quot;</code>) 将会让 Vue 知道如何使行为更容易预测。</p> <p data-v-3d5d9371>根据我们的经验，最好<em data-v-3d5d9371>始终</em>添加一个唯一的键值，以便你和你的团队永远不必担心这些极端情况。也在少数对性能有严格要求的情况下，为了避免对象固化，你可以刻意做一些非常规的处理。</p></details> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>li</span> <span class="token attr-name" data-v-3d5d9371>v-for</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>todo in todos<span class="token punctuation" data-v-3d5d9371>&quot;</span></span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
    {{ todo.text }}
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>li</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>li</span>
    <span class="token attr-name" data-v-3d5d9371>v-for</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>todo in todos<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
    <span class="token attr-name" data-v-3d5d9371>:key</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>todo.id<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
    {{ todo.text }}
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>li</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371></div></div></div> <h3 id="避免-v-if-和-v-for-一起使用必要" data-v-3d5d9371><a href="#避免-v-if-和-v-for-一起使用必要" class="header-anchor" data-v-3d5d9371>#</a> 避免 <code data-v-3d5d9371>v-if</code> 和 <code data-v-3d5d9371>v-for</code> 一起使用<sup data-p="a" data-v-3d5d9371>必要</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>永远不要把 <code data-v-3d5d9371>v-if</code> 和 <code data-v-3d5d9371>v-for</code> 同时用在同一个元素上。</strong></p> <p data-v-3d5d9371>一般我们在两种常见的情况下会倾向于这样做：</p> <ul data-v-3d5d9371><li data-v-3d5d9371><p data-v-3d5d9371>为了过滤一个列表中的项目 (比如 <code data-v-3d5d9371>v-for=&quot;user in users&quot; v-if=&quot;user.isActive&quot;</code>)。在这种情形下，请将 <code data-v-3d5d9371>users</code> 替换为一个计算属性 (比如 <code data-v-3d5d9371>activeUsers</code>)，让其返回过滤后的列表。</p></li> <li data-v-3d5d9371><p data-v-3d5d9371>为了避免渲染本应该被隐藏的列表 (比如 <code data-v-3d5d9371>v-for=&quot;user in users&quot; v-if=&quot;shouldShowUsers&quot;</code>)。这种情形下，请将 <code data-v-3d5d9371>v-if</code> 移动至容器元素上 (比如 <code data-v-3d5d9371>ul</code>、<code data-v-3d5d9371>ol</code></p></li></ul> <details class="custom-block details" data-v-3d5d9371><summary data-v-3d5d9371>详解</summary> <p data-v-3d5d9371>当 Vue 处理指令时，<code data-v-3d5d9371>v-for</code> 比 <code data-v-3d5d9371>v-if</code> 具有更高的优先级，所以这个模板：</p> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>li</span>
    <span class="token attr-name" data-v-3d5d9371>v-for</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user in users<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
    <span class="token attr-name" data-v-3d5d9371>v-if</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user.isActive<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
    <span class="token attr-name" data-v-3d5d9371>:key</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user.id<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
    {{ user.name }}
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>li</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371></div></div><p data-v-3d5d9371>将会经过如下运算：</p> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>users<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>map</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token parameter" data-v-3d5d9371>user</span> <span class="token operator" data-v-3d5d9371>=&gt;</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token keyword" data-v-3d5d9371>if</span> <span class="token punctuation" data-v-3d5d9371>(</span>user<span class="token punctuation" data-v-3d5d9371>.</span>isActive<span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token keyword" data-v-3d5d9371>return</span> user<span class="token punctuation" data-v-3d5d9371>.</span>name
  <span class="token punctuation" data-v-3d5d9371>}</span>
<span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371></div></div><p data-v-3d5d9371>因此哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，不论活跃用户是否发生了变化。</p> <p data-v-3d5d9371>通过将其更换为在如下的一个计算属性上遍历：</p> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371>computed<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token function" data-v-3d5d9371>activeUsers</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token keyword" data-v-3d5d9371>return</span> <span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>users<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>filter</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token parameter" data-v-3d5d9371>user</span> <span class="token operator" data-v-3d5d9371>=&gt;</span> user<span class="token punctuation" data-v-3d5d9371>.</span>isActive<span class="token punctuation" data-v-3d5d9371>)</span>
  <span class="token punctuation" data-v-3d5d9371>}</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>li</span>
    <span class="token attr-name" data-v-3d5d9371>v-for</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user in activeUsers<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
    <span class="token attr-name" data-v-3d5d9371>:key</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user.id<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
    {{ user.name }}
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>li</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371></div></div><p data-v-3d5d9371>我们将会获得如下好处：</p> <ul data-v-3d5d9371><li data-v-3d5d9371>过滤后的列表<em data-v-3d5d9371>只</em>会在 <code data-v-3d5d9371>users</code> 数组发生相关变化时才被重新运算，过滤更高效。</li> <li data-v-3d5d9371>使用 <code data-v-3d5d9371>v-for=&quot;user in activeUsers&quot;</code> 之后，我们在渲染的时候<em data-v-3d5d9371>只</em>遍历活跃用户，渲染更高效。</li> <li data-v-3d5d9371>解耦渲染层的逻辑，可维护性 (对逻辑的更改和扩展) 更强。</li></ul> <p data-v-3d5d9371>为了获得同样的好处，我们也可以把：</p> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>li</span>
    <span class="token attr-name" data-v-3d5d9371>v-for</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user in users<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
    <span class="token attr-name" data-v-3d5d9371>v-if</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>shouldShowUsers<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
    <span class="token attr-name" data-v-3d5d9371>:key</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user.id<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
    {{ user.name }}
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>li</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371></div></div><p data-v-3d5d9371>更新为：</p> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>ul</span> <span class="token attr-name" data-v-3d5d9371>v-if</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>shouldShowUsers<span class="token punctuation" data-v-3d5d9371>&quot;</span></span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>li</span>
    <span class="token attr-name" data-v-3d5d9371>v-for</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user in users<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
    <span class="token attr-name" data-v-3d5d9371>:key</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user.id<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
    {{ user.name }}
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>li</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371></div></div><p data-v-3d5d9371>通过将 <code data-v-3d5d9371>v-if</code> 移动到容器元素，我们不会再对列表中的每个用户检查 <code data-v-3d5d9371>shouldShowUsers</code>。取而代之的是，我们只检查它一次，且不会在 <code data-v-3d5d9371>shouldShowUsers</code> 为否的时候运算 <code data-v-3d5d9371>v-for</code>。</p></details> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>li</span>
    <span class="token attr-name" data-v-3d5d9371>v-for</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user in users<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
    <span class="token attr-name" data-v-3d5d9371>v-if</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user.isActive<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
    <span class="token attr-name" data-v-3d5d9371>:key</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user.id<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
    {{ user.name }}
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>li</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>li</span>
    <span class="token attr-name" data-v-3d5d9371>v-for</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user in users<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
    <span class="token attr-name" data-v-3d5d9371>v-if</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>shouldShowUsers<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
    <span class="token attr-name" data-v-3d5d9371>:key</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user.id<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
    {{ user.name }}
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>li</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>li</span>
    <span class="token attr-name" data-v-3d5d9371>v-for</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user in activeUsers<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
    <span class="token attr-name" data-v-3d5d9371>:key</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user.id<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
    {{ user.name }}
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>li</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>ul</span> <span class="token attr-name" data-v-3d5d9371>v-if</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>shouldShowUsers<span class="token punctuation" data-v-3d5d9371>&quot;</span></span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>li</span>
    <span class="token attr-name" data-v-3d5d9371>v-for</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user in users<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
    <span class="token attr-name" data-v-3d5d9371>:key</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>user.id<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
    {{ user.name }}
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>li</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>ul</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371></div></div></div> <h3 id="为组件样式设置作用域必要" data-v-3d5d9371><a href="#为组件样式设置作用域必要" class="header-anchor" data-v-3d5d9371>#</a> 为组件样式设置作用域<sup data-p="a" data-v-3d5d9371>必要</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>对于应用来说，顶级 <code data-v-3d5d9371>App</code> 组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。</strong></p> <p data-v-3d5d9371>这条规则只和<a href="/guide/single-file-component.html" data-v-3d5d9371>单文件组件</a>有关。你<em data-v-3d5d9371>不一定</em>要使用 <a href="https://vue-loader.vuejs.org/en/features/scoped-css.html" target="_blank" rel="noopener noreferrer" data-v-3d5d9371><code data-v-3d5d9371>scoped</code> attribute<span data-v-3d5d9371><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。设置作用域也可以通过 <a href="https://vue-loader.vuejs.org/en/features/css-modules.html" target="_blank" rel="noopener noreferrer" data-v-3d5d9371>CSS Modules<span data-v-3d5d9371><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，那是一个基于 class 的类似 <a href="http://getbem.com/" target="_blank" rel="noopener noreferrer" data-v-3d5d9371>BEM<span data-v-3d5d9371><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 的策略，当然你也可以使用其它的库或约定。</p> <p data-v-3d5d9371><strong data-v-3d5d9371>不管怎样，对于组件库，我们应该更倾向于选用基于 class 的策略而不是 <code data-v-3d5d9371>scoped</code> attribute。</strong></p> <p data-v-3d5d9371>这让覆写内部样式更容易：使用了人类可理解的 class 名称且没有太高的选择器优先级，而且不太会导致冲突。</p> <details class="custom-block details" data-v-3d5d9371><summary data-v-3d5d9371>详解</summary> <p data-v-3d5d9371>如果你和其他开发者一起开发一个大型工程，或有时引入三方 HTML/CSS (比如来自 Auth0)，设置一致的作用域会确保你的样式只会运用在它们想要作用的组件上。</p> <p data-v-3d5d9371>不止要使用 <code data-v-3d5d9371>scoped</code> attribute，使用唯一的 class 名可以帮你确保那些三方库的 CSS 不会运用在你自己的 HTML 上。比如许多工程都使用了 <code data-v-3d5d9371>button</code>、<code data-v-3d5d9371>btn</code> 或 <code data-v-3d5d9371>icon</code> class 名，所以即便你不使用类似 BEM 的策略，添加一个 app 专属或组件专属的前缀 (比如 <code data-v-3d5d9371>ButtonClose-icon</code>) 也可以提供很多保护。</p></details> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>button</span> <span class="token attr-name" data-v-3d5d9371>class</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>btn btn-close<span class="token punctuation" data-v-3d5d9371>&quot;</span></span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>×<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>button</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>

<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token style" data-v-3d5d9371><span class="token language-css" data-v-3d5d9371>
<span class="token selector" data-v-3d5d9371>.btn-close</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token property" data-v-3d5d9371>background-color</span><span class="token punctuation" data-v-3d5d9371>:</span> red<span class="token punctuation" data-v-3d5d9371>;</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>button</span> <span class="token attr-name" data-v-3d5d9371>class</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>button button-close<span class="token punctuation" data-v-3d5d9371>&quot;</span></span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>×<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>button</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>

<span class="token comment" data-v-3d5d9371>&lt;!-- 使用 `scoped` attribute --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>style</span> <span class="token attr-name" data-v-3d5d9371>scoped</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token style" data-v-3d5d9371><span class="token language-css" data-v-3d5d9371>
<span class="token selector" data-v-3d5d9371>.button</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token property" data-v-3d5d9371>border</span><span class="token punctuation" data-v-3d5d9371>:</span> none<span class="token punctuation" data-v-3d5d9371>;</span>
  <span class="token property" data-v-3d5d9371>border-radius</span><span class="token punctuation" data-v-3d5d9371>:</span> 2px<span class="token punctuation" data-v-3d5d9371>;</span>
<span class="token punctuation" data-v-3d5d9371>}</span>

<span class="token selector" data-v-3d5d9371>.button-close</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token property" data-v-3d5d9371>background-color</span><span class="token punctuation" data-v-3d5d9371>:</span> red<span class="token punctuation" data-v-3d5d9371>;</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>10</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>11</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>12</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>13</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>14</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>15</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>button</span> <span class="token attr-name" data-v-3d5d9371>:class</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>[$style.button, $style.buttonClose]<span class="token punctuation" data-v-3d5d9371>&quot;</span></span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>×<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>button</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>

<span class="token comment" data-v-3d5d9371>&lt;!-- 使用 CSS modules --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>style</span> <span class="token attr-name" data-v-3d5d9371>module</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token style" data-v-3d5d9371><span class="token language-css" data-v-3d5d9371>
<span class="token selector" data-v-3d5d9371>.button</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token property" data-v-3d5d9371>border</span><span class="token punctuation" data-v-3d5d9371>:</span> none<span class="token punctuation" data-v-3d5d9371>;</span>
  <span class="token property" data-v-3d5d9371>border-radius</span><span class="token punctuation" data-v-3d5d9371>:</span> 2px<span class="token punctuation" data-v-3d5d9371>;</span>
<span class="token punctuation" data-v-3d5d9371>}</span>

<span class="token selector" data-v-3d5d9371>.buttonClose</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token property" data-v-3d5d9371>background-color</span><span class="token punctuation" data-v-3d5d9371>:</span> red<span class="token punctuation" data-v-3d5d9371>;</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>10</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>11</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>12</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>13</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>14</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>15</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>button</span> <span class="token attr-name" data-v-3d5d9371>class</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>c-Button c-Button--close<span class="token punctuation" data-v-3d5d9371>&quot;</span></span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>×<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>button</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>

<span class="token comment" data-v-3d5d9371>&lt;!-- 使用 BEM 约定 --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token style" data-v-3d5d9371><span class="token language-css" data-v-3d5d9371>
<span class="token selector" data-v-3d5d9371>.c-Button</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token property" data-v-3d5d9371>border</span><span class="token punctuation" data-v-3d5d9371>:</span> none<span class="token punctuation" data-v-3d5d9371>;</span>
  <span class="token property" data-v-3d5d9371>border-radius</span><span class="token punctuation" data-v-3d5d9371>:</span> 2px<span class="token punctuation" data-v-3d5d9371>;</span>
<span class="token punctuation" data-v-3d5d9371>}</span>

<span class="token selector" data-v-3d5d9371>.c-Button--close</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token property" data-v-3d5d9371>background-color</span><span class="token punctuation" data-v-3d5d9371>:</span> red<span class="token punctuation" data-v-3d5d9371>;</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>10</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>11</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>12</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>13</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>14</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>15</span><br data-v-3d5d9371></div></div></div> <h3 id="私有-property-名称必要" data-v-3d5d9371><a href="#私有-property-名称必要" class="header-anchor" data-v-3d5d9371>#</a> 私有 property 名称<sup data-p="a" data-v-3d5d9371>必要</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>使用模块作用域保持不允许外部访问的函数的私有性。如果无法做到这一点，就始终为插件、混入等不考虑作为对外公共 API 的自定义私有 property 使用 <code data-v-3d5d9371>$_</code> 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 <code data-v-3d5d9371>$_yourPluginName_</code>)。</strong></p> <p data-v-3d5d9371>::: 详细</p> <p data-v-3d5d9371>Vue 使用 <code data-v-3d5d9371>_</code> 前缀来定义其自身的私有 property，所以使用相同的前缀 (比如 <code data-v-3d5d9371>_update</code>) 有覆写实例 property 的风险。即便你检查确认 Vue 当前版本没有用到这个 property 名，也不能保证和将来的版本没有冲突。</p> <p data-v-3d5d9371>对于 <code data-v-3d5d9371>$</code> 前缀来说，其在 Vue 生态系统中的目的是暴露给用户的一个特殊的实例 property，所以把它用于<em data-v-3d5d9371>私有</em> property 并不合适。</p> <p data-v-3d5d9371>不过，我们推荐把这两个前缀结合为 <code data-v-3d5d9371>$_</code>，作为一个用户定义的私有 property 的约定，以确保不会和 Vue 自身相冲突。</p> <p data-v-3d5d9371>:::</p> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token keyword" data-v-3d5d9371>const</span> myGreatMixin <span class="token operator" data-v-3d5d9371>=</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
  methods<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token function" data-v-3d5d9371>update</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
      <span class="token comment" data-v-3d5d9371>// ...</span>
    <span class="token punctuation" data-v-3d5d9371>}</span>
  <span class="token punctuation" data-v-3d5d9371>}</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371></div></div><div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token keyword" data-v-3d5d9371>const</span> myGreatMixin <span class="token operator" data-v-3d5d9371>=</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
  methods<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token function" data-v-3d5d9371>_update</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
      <span class="token comment" data-v-3d5d9371>// ...</span>
    <span class="token punctuation" data-v-3d5d9371>}</span>
  <span class="token punctuation" data-v-3d5d9371>}</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371></div></div><div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token keyword" data-v-3d5d9371>const</span> myGreatMixin <span class="token operator" data-v-3d5d9371>=</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
  methods<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token function" data-v-3d5d9371>$update</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
      <span class="token comment" data-v-3d5d9371>// ...</span>
    <span class="token punctuation" data-v-3d5d9371>}</span>
  <span class="token punctuation" data-v-3d5d9371>}</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371></div></div><div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token keyword" data-v-3d5d9371>const</span> myGreatMixin <span class="token operator" data-v-3d5d9371>=</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
  methods<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token function" data-v-3d5d9371>$_update</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
      <span class="token comment" data-v-3d5d9371>// ...</span>
    <span class="token punctuation" data-v-3d5d9371>}</span>
  <span class="token punctuation" data-v-3d5d9371>}</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token keyword" data-v-3d5d9371>const</span> myGreatMixin <span class="token operator" data-v-3d5d9371>=</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
  methods<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token function" data-v-3d5d9371>$_myGreatMixin_update</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
      <span class="token comment" data-v-3d5d9371>// ...</span>
    <span class="token punctuation" data-v-3d5d9371>}</span>
  <span class="token punctuation" data-v-3d5d9371>}</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371></div></div><div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>// Even better!</span>
<span class="token keyword" data-v-3d5d9371>const</span> myGreatMixin <span class="token operator" data-v-3d5d9371>=</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
  methods<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token function" data-v-3d5d9371>publicMethod</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
      <span class="token comment" data-v-3d5d9371>// ...</span>
      <span class="token function" data-v-3d5d9371>myPrivateFunction</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span>
    <span class="token punctuation" data-v-3d5d9371>}</span>
  <span class="token punctuation" data-v-3d5d9371>}</span>
<span class="token punctuation" data-v-3d5d9371>}</span>

<span class="token keyword" data-v-3d5d9371>function</span> <span class="token function" data-v-3d5d9371>myPrivateFunction</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
<span class="token punctuation" data-v-3d5d9371>}</span>

<span class="token keyword" data-v-3d5d9371>export</span> <span class="token keyword" data-v-3d5d9371>default</span> myGreatMixin
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>10</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>11</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>12</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>13</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>14</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>15</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>16</span><br data-v-3d5d9371></div></div></div> <h2 id="优先级-b-的规则-强烈推荐-增强代码可读性" data-v-3d5d9371><a href="#优先级-b-的规则-强烈推荐-增强代码可读性" class="header-anchor" data-v-3d5d9371>#</a> 优先级 B 的规则：强烈推荐 <span class="hide-from-sidebar" data-v-3d5d9371>(增强代码可读性)</span></h2> <h3 id="组件文件强烈推荐" data-v-3d5d9371><a href="#组件文件强烈推荐" class="header-anchor" data-v-3d5d9371>#</a> 组件文件<sup data-p="b" data-v-3d5d9371>强烈推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>只要有能够拼接文件的构建系统，就把每个组件单独分成文件。</strong></p> <p data-v-3d5d9371>当你需要编辑一个组件或查阅一个组件的用法时，可以更快速的找到它。</p> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371>app<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>component</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>'TodoList'</span><span class="token punctuation" data-v-3d5d9371>,</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
<span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>)</span>

app<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>component</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>'TodoItem'</span><span class="token punctuation" data-v-3d5d9371>,</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
<span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- TodoList.js
|- TodoItem.js
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371></div></div><div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- TodoList.vue
|- TodoItem.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371></div></div></div> <h3 id="单文件组件文件的大小写强烈推荐" data-v-3d5d9371><a href="#单文件组件文件的大小写强烈推荐" class="header-anchor" data-v-3d5d9371>#</a> 单文件组件文件的大小写<sup data-p="b" data-v-3d5d9371>强烈推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371><a href="/guide/single-file-component.html" data-v-3d5d9371>单文件组件</a>的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。</strong></p> <p data-v-3d5d9371>单词大写开头对于代码编辑器的自动补全最为友好，因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。然而，混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题，这也是横线连接命名同样完全可取的原因。</p> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- mycomponent.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371></div></div><div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- myComponent.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- MyComponent.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371></div></div><div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- my-component.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371></div></div></div> <h3 id="基础组件名称强烈推荐" data-v-3d5d9371><a href="#基础组件名称强烈推荐" class="header-anchor" data-v-3d5d9371>#</a> 基础组件名称<sup data-p="b" data-v-3d5d9371>强烈推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 <code data-v-3d5d9371>Base</code>、<code data-v-3d5d9371>App</code> 或 <code data-v-3d5d9371>V</code>。</strong></p> <details class="custom-block details" data-v-3d5d9371><summary data-v-3d5d9371>详解</summary> <p data-v-3d5d9371>这些组件为你的应用奠定了一致的基础样式和行为。它们可能<strong data-v-3d5d9371>只</strong>包括：</p> <ul data-v-3d5d9371><li data-v-3d5d9371>HTML 元素</li> <li data-v-3d5d9371>其它基础组件</li> <li data-v-3d5d9371>第三方 UI 组件库</li></ul> <p data-v-3d5d9371>但是它们<strong data-v-3d5d9371>绝不会</strong>包括全局状态 (比如来自 Vuex store)。</p> <p data-v-3d5d9371>它们的名字通常包含所包裹元素的名字 (比如 <code data-v-3d5d9371>BaseButton</code>、<code data-v-3d5d9371>BaseTable</code>)，除非没有现成的对应功能的元素 (比如 <code data-v-3d5d9371>BaseIcon</code>)。如果你为特定的上下文构建类似的组件，那它们几乎总会消费这些组件 (比如 <code data-v-3d5d9371>BaseButton</code> 可能会用在 <code data-v-3d5d9371>ButtonSubmit</code> 上)。</p> <p data-v-3d5d9371>这样做的几个好处：</p> <ul data-v-3d5d9371><li data-v-3d5d9371><p data-v-3d5d9371>当你在编辑器中以字母顺序排序时，你的应用的基础组件会全部列在一起，这样更容易识别。</p></li> <li data-v-3d5d9371><p data-v-3d5d9371>因为组件名应该始终是多个单词，所以这样做可以避免你在包裹简单组件时随意选择前缀 (比如 <code data-v-3d5d9371>MyButton</code>、<code data-v-3d5d9371>VueButton</code>)。</p></li> <li data-v-3d5d9371><p data-v-3d5d9371>因为这些组件会被频繁使用，所以你可能想把它们放到全局而不是在各处分别导入它们。使用相同的前缀可以让 webpack 这样工作：</p> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token keyword" data-v-3d5d9371>const</span> requireComponent <span class="token operator" data-v-3d5d9371>=</span> require<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>context</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>&quot;./src&quot;</span><span class="token punctuation" data-v-3d5d9371>,</span> <span class="token boolean" data-v-3d5d9371>true</span><span class="token punctuation" data-v-3d5d9371>,</span> <span class="token regex" data-v-3d5d9371><span class="token regex-delimiter" data-v-3d5d9371>/</span><span class="token regex-source language-regex" data-v-3d5d9371>Base[A-Z]\w+\.(vue|js)$</span><span class="token regex-delimiter" data-v-3d5d9371>/</span></span><span class="token punctuation" data-v-3d5d9371>)</span>
requireComponent<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>keys</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span><span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>forEach</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token keyword" data-v-3d5d9371>function</span> <span class="token punctuation" data-v-3d5d9371>(</span><span class="token parameter" data-v-3d5d9371>fileName</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token keyword" data-v-3d5d9371>let</span> baseComponentConfig <span class="token operator" data-v-3d5d9371>=</span> <span class="token function" data-v-3d5d9371>requireComponent</span><span class="token punctuation" data-v-3d5d9371>(</span>fileName<span class="token punctuation" data-v-3d5d9371>)</span>
  baseComponentConfig <span class="token operator" data-v-3d5d9371>=</span> baseComponentConfig<span class="token punctuation" data-v-3d5d9371>.</span>default <span class="token operator" data-v-3d5d9371>||</span> baseComponentConfig
  <span class="token keyword" data-v-3d5d9371>const</span> baseComponentName <span class="token operator" data-v-3d5d9371>=</span> baseComponentConfig<span class="token punctuation" data-v-3d5d9371>.</span>name <span class="token operator" data-v-3d5d9371>||</span> <span class="token punctuation" data-v-3d5d9371>(</span>
    fileName
      <span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>replace</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token regex" data-v-3d5d9371><span class="token regex-delimiter" data-v-3d5d9371>/</span><span class="token regex-source language-regex" data-v-3d5d9371>^.+\/</span><span class="token regex-delimiter" data-v-3d5d9371>/</span></span><span class="token punctuation" data-v-3d5d9371>,</span> <span class="token string" data-v-3d5d9371>''</span><span class="token punctuation" data-v-3d5d9371>)</span>
      <span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>replace</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token regex" data-v-3d5d9371><span class="token regex-delimiter" data-v-3d5d9371>/</span><span class="token regex-source language-regex" data-v-3d5d9371>\.\w+$</span><span class="token regex-delimiter" data-v-3d5d9371>/</span></span><span class="token punctuation" data-v-3d5d9371>,</span> <span class="token string" data-v-3d5d9371>''</span><span class="token punctuation" data-v-3d5d9371>)</span>
  <span class="token punctuation" data-v-3d5d9371>)</span>
  app<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>component</span><span class="token punctuation" data-v-3d5d9371>(</span>baseComponentName<span class="token punctuation" data-v-3d5d9371>,</span> baseComponentConfig<span class="token punctuation" data-v-3d5d9371>)</span>
<span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>10</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>11</span><br data-v-3d5d9371></div></div></li></ul></details> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div><div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div><div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div></div> <h3 id="单组件名称强烈推荐" data-v-3d5d9371><a href="#单组件名称强烈推荐" class="header-anchor" data-v-3d5d9371>#</a> 单组件名称<sup data-p="b" data-v-3d5d9371>强烈推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>只应该拥有单个活跃实例的组件应该以 <code data-v-3d5d9371>The</code> 前缀命名，以示其唯一性。</strong></p> <p data-v-3d5d9371>这不意味着组件只可用于一个单页面，而是<em data-v-3d5d9371>每个页面</em>只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只是<em data-v-3d5d9371>目前</em>在每个页面里只使用一次。</p> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- Heading.vue
|- MySidebar.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- TheHeading.vue
|- TheSidebar.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371></div></div></div> <h3 id="紧密耦合的组件名称强烈推荐" data-v-3d5d9371><a href="#紧密耦合的组件名称强烈推荐" class="header-anchor" data-v-3d5d9371>#</a> 紧密耦合的组件名称<sup data-p="b" data-v-3d5d9371>强烈推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>和父组件紧密耦合的子组件应该以父组件名作为前缀命名。</strong></p> <p data-v-3d5d9371>如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。</p> <p data-v-3d5d9371>::: 详情
你可以试着通过在其父组件命名的目录中嵌套子组件以解决这个问题。比如：</p> <div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- TodoList/
   |- Item/
      |- index.vue
      |- Button.vue
   |- index.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371></div></div><p data-v-3d5d9371>或:</p> <div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- TodoList/
   |- Item/
      |- Button.vue
   |- Item.vue
|- TodoList.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371></div></div><p data-v-3d5d9371>但是这种方式并不推荐，因为这会导致：</p> <ul data-v-3d5d9371><li data-v-3d5d9371>许多文件的名字相同，使得在编辑器中快速切换文件变得困难。</li> <li data-v-3d5d9371>过多嵌套的子目录增加了在编辑器侧边栏中浏览组件所花的时间。</li></ul> <p data-v-3d5d9371>:::</p> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div><div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div><div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371></div></div></div> <h3 id="组件名称中的单词顺序强烈推荐" data-v-3d5d9371><a href="#组件名称中的单词顺序强烈推荐" class="header-anchor" data-v-3d5d9371>#</a> 组件名称中的单词顺序<sup data-p="b" data-v-3d5d9371>强烈推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>组件名称应该以高阶的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。</strong></p> <details class="custom-block details" data-v-3d5d9371><summary data-v-3d5d9371>详解</summary> <p data-v-3d5d9371>你可能会疑惑：</p> <blockquote data-v-3d5d9371><p data-v-3d5d9371>“为什么我们给组件命名时不多遵从自然语言呢？”</p></blockquote> <p data-v-3d5d9371>在自然的英文里，形容词和其它描述语通常都出现在名词之前，否则需要使用连接词。比如：</p> <ul data-v-3d5d9371><li data-v-3d5d9371>Coffee <em data-v-3d5d9371>with</em> milk</li> <li data-v-3d5d9371>Soup <em data-v-3d5d9371>of the</em> day</li> <li data-v-3d5d9371>Visitor <em data-v-3d5d9371>to the</em> museum</li></ul> <p data-v-3d5d9371>如果你愿意，你完全可以在组件名里包含这些连接词，但是单词的顺序很重要。</p> <p data-v-3d5d9371>同样要注意<strong data-v-3d5d9371>在你的应用中所谓的“高阶”是跟语境有关的</strong>。比如对于一个带搜索表单的应用来说，它可能包含这样的组件：</p> <div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371></div></div><p data-v-3d5d9371>你可能注意到了，我们很难看出来哪些组件是针对搜索的。现在我们来根据规则给组件重新命名：</p> <div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputExcludeGlob.vue
|- SearchInputQuery.vue
|- SettingsCheckboxLaunchOnStartup.vue
|- SettingsCheckboxTerms.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371></div></div><p data-v-3d5d9371>因为编辑器通常会按字母顺序组织文件，所以现在组件之间的重要关系一目了然。</p> <p data-v-3d5d9371>你可能想换成多级目录的方式，把所有的搜索组件放到“search”目录，把所有的设置组件放到“settings”目录。我们只推荐在非常大型 (如有 100+ 个组件) 的应用下才考虑这么做，因为：</p> <ul data-v-3d5d9371><li data-v-3d5d9371>在多级目录间找来找去，要比在单个 <code data-v-3d5d9371>components</code> 目录下滚动查找要花费更多的精力。</li> <li data-v-3d5d9371>存在组件重名 (比如存在多个 <code data-v-3d5d9371>ButtonDelete.vue</code> 组件) 的时候在编辑器里更难快速定位。</li> <li data-v-3d5d9371>让重构变得更难，因为为一个移动了的组件更新相关引用时，查找/替换通常并不高效。</li></ul></details> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371></div></div></div> <h3 id="自闭合组件强烈推荐" data-v-3d5d9371><a href="#自闭合组件强烈推荐" class="header-anchor" data-v-3d5d9371>#</a> 自闭合组件<sup data-p="b" data-v-3d5d9371>强烈推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>在<a href="/guide/single-file-component.html" data-v-3d5d9371>单文件组件</a>、字符串模板和 <a href="/guide/render-function.html#jsx" data-v-3d5d9371>JSX</a> 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。</strong></p> <p data-v-3d5d9371>自闭合组件表示它们不仅没有内容，而且<strong data-v-3d5d9371>刻意</strong>没有内容。其不同之处就好像书上的一页白纸对比贴有“本页有意留白”标签的白纸。而且没有了额外的闭合标签，你的代码也更简洁。</p> <p data-v-3d5d9371>不幸的是，HTML 并不支持自闭合的自定义元素——只有<a href="https://www.w3.org/TR/html/syntax.html#void-elements" target="_blank" rel="noopener noreferrer" data-v-3d5d9371>官方的“空”元素<span data-v-3d5d9371><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。所以上述策略仅适用于进入 DOM 之前 Vue 的模板编译器能够触达的地方，然后再产出符合 DOM 规范的 HTML。</p> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>&lt;!-- 在单文件组件、字符串模板和 JSX 中 --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>MyComponent</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>MyComponent</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>&lt;!-- 在 DOM 模板中                   --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>my-component</span><span class="token punctuation" data-v-3d5d9371>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>&lt;!-- 在单文件组件、字符串模板和 JSX 中 --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>MyComponent</span><span class="token punctuation" data-v-3d5d9371>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>&lt;!-- 在 DOM 模板中                   --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>my-component</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>my-component</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371></div></div></div> <h3 id="模板中的组件名称大小写强烈推荐" data-v-3d5d9371><a href="#模板中的组件名称大小写强烈推荐" class="header-anchor" data-v-3d5d9371>#</a> 模板中的组件名称大小写<sup data-p="b" data-v-3d5d9371>强烈推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>对于绝大多数项目来说，在<a href="/guide/single-file-component.html" data-v-3d5d9371>单文件组件</a>和字符串模板中组件名称应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。</strong></p> <p data-v-3d5d9371>PascalCase 相比 kebab-case 有一些优势：</p> <ul data-v-3d5d9371><li data-v-3d5d9371>编辑器可以在模板里自动补全组件名称，因为 PascalCase 同样适用于 JavaScript。</li> <li data-v-3d5d9371><code data-v-3d5d9371>MyComponent&gt;</code> 视觉上比 <code data-v-3d5d9371>&lt;my-component&gt;</code> 更能够和单个单词的 HTML 元素区别开来，因为前者的不同之处有两个大写字母，后者只有一个横线。</li> <li data-v-3d5d9371>如果你在模板中使用任何非 Vue 的自定义元素，比如一个 Web Component，PascalCase 确保了你的 Vue 组件在视觉上仍然是易识别的。</li></ul> <p data-v-3d5d9371>不幸的是，由于 HTML 是大小写不敏感的，在 DOM 模板中必须仍使用 kebab-case。</p> <p data-v-3d5d9371>还请注意，如果你已经是 kebab-case 的重度用户，那么与 HTML 保持一致的命名约定且在多个项目中保持相同的大小写规则就可能比上述优势更为重要了。在这些情况下，<strong data-v-3d5d9371>在所有的地方都使用 kebab-case 同样是可以接受的</strong>。</p> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>&lt;!-- 在单文件组件和字符串模板中 --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>mycomponent</span><span class="token punctuation" data-v-3d5d9371>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>&lt;!-- 在单文件组件和字符串模板中 --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>myComponent</span><span class="token punctuation" data-v-3d5d9371>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>&lt;!-- 在 DOM 模板中            --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>MyComponent</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>MyComponent</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>&lt;!-- 在单文件组件和字符串模板中 --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>MyComponent</span><span class="token punctuation" data-v-3d5d9371>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>&lt;!-- 在 DOM 模板中            --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>my-component</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>my-component</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371></div></div><p data-v-3d5d9371>或者</p> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>&lt;!-- 在所有地方 --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>my-component</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>my-component</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371></div></div></div> <h3 id="js-jsx-中使用的组件名称强烈推荐" data-v-3d5d9371><a href="#js-jsx-中使用的组件名称强烈推荐" class="header-anchor" data-v-3d5d9371>#</a> JS/JSX 中使用的组件名称<sup data-p="b" data-v-3d5d9371>强烈推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>JS/<a href="/guide/render-function.html#jsx" data-v-3d5d9371>JSX</a> 中的组件名应该始终是 PascalCase 的，尽管在较为简单的应用中只使用 <code data-v-3d5d9371>app.component</code> 进行全局组件注册时，可以使用 kebab-case 字符串。</strong></p> <details class="custom-block details" data-v-3d5d9371><summary data-v-3d5d9371>详解</summary> <p data-v-3d5d9371>在 JavaScript 中，PascalCase 是类和构造函数 (本质上任何可以产生多份不同实例的东西) 的命名约定。Vue 组件也有多份实例，所以同样使用 PascalCase 是有意义的。额外的好处是，在 JSX (和模板) 里使用 PascalCase 使得代码的读者更容易分辨 Vue 组件和 HTML 元素。</p> <p data-v-3d5d9371>然而，对于<strong data-v-3d5d9371>只</strong>通过 <code data-v-3d5d9371>app.component</code> 定义全局组件的应用来说，我们推荐 kebab-case 作为替代。原因是：</p> <ul data-v-3d5d9371><li data-v-3d5d9371>全局组件很少被 JavaScript 引用，所以遵守 JavaScript 的命名约定意义不大。</li> <li data-v-3d5d9371>这些应用往往包含许多 DOM 内的模板，这种情况下是<strong data-v-3d5d9371>必须</strong><a href="#%E6%A8%A1%E6%9D%BF%E4%B8%AD%E7%9A%84%E7%BB%84%E4%BB%B6%E5%90%8D%E5%A4%A7%E5%B0%8F%E5%86%99-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90" data-v-3d5d9371>使用 kebab-case</a> 的。</li></ul></details> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371>app<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>component</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>'myComponent'</span><span class="token punctuation" data-v-3d5d9371>,</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
<span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371></div></div><div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token keyword" data-v-3d5d9371>import</span> myComponent <span class="token keyword" data-v-3d5d9371>from</span> <span class="token string" data-v-3d5d9371>'./MyComponent.vue'</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371></div></div><div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token keyword" data-v-3d5d9371>export</span> <span class="token keyword" data-v-3d5d9371>default</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  name<span class="token operator" data-v-3d5d9371>:</span> <span class="token string" data-v-3d5d9371>'myComponent'</span><span class="token punctuation" data-v-3d5d9371>,</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div><div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token keyword" data-v-3d5d9371>export</span> <span class="token keyword" data-v-3d5d9371>default</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  name<span class="token operator" data-v-3d5d9371>:</span> <span class="token string" data-v-3d5d9371>'my-component'</span><span class="token punctuation" data-v-3d5d9371>,</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371>app<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>component</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>'MyComponent'</span><span class="token punctuation" data-v-3d5d9371>,</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
<span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371></div></div><div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371>app<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>component</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>'my-component'</span><span class="token punctuation" data-v-3d5d9371>,</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
<span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371></div></div><div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token keyword" data-v-3d5d9371>import</span> MyComponent <span class="token keyword" data-v-3d5d9371>from</span> <span class="token string" data-v-3d5d9371>'./MyComponent.vue'</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371></div></div><div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token keyword" data-v-3d5d9371>export</span> <span class="token keyword" data-v-3d5d9371>default</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  name<span class="token operator" data-v-3d5d9371>:</span> <span class="token string" data-v-3d5d9371>'MyComponent'</span><span class="token punctuation" data-v-3d5d9371>,</span>
  <span class="token comment" data-v-3d5d9371>// ...</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div></div> <h3 id="完整单词的组件名称强烈推荐" data-v-3d5d9371><a href="#完整单词的组件名称强烈推荐" class="header-anchor" data-v-3d5d9371>#</a> 完整单词的组件名称<sup data-p="b" data-v-3d5d9371>强烈推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>组件名称应该倾向于完整单词而不是缩写。</strong></p> <p data-v-3d5d9371>编辑器中的自动补全已经让书写长命名的代价非常之低了，而其带来的明确性却是非常宝贵的。不常用的缩写尤其应该避免。</p> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- SdSettings.vue
|- UProfOpts.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language- line-numbers-mode" data-v-3d5d9371><pre class="language-text" data-v-3d5d9371><code data-v-3d5d9371>components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371></div></div></div> <h3 id="prop-名称强烈推荐" data-v-3d5d9371><a href="#prop-名称强烈推荐" class="header-anchor" data-v-3d5d9371>#</a> Prop 名称<sup data-p="b" data-v-3d5d9371>强烈推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 <a href="/guide/render-function.html#jsx" data-v-3d5d9371>JSX</a> 中应该始终使用 kebab-case。</strong></p> <p data-v-3d5d9371>我们单纯的遵循每个语言的约定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。</p> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371>props<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token string" data-v-3d5d9371>'greeting-text'</span><span class="token operator" data-v-3d5d9371>:</span> String
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>WelcomeMessage</span> <span class="token attr-name" data-v-3d5d9371>greetingText</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>hi<span class="token punctuation" data-v-3d5d9371>&quot;</span></span><span class="token punctuation" data-v-3d5d9371>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371>props<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  greetingText<span class="token operator" data-v-3d5d9371>:</span> String
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>WelcomeMessage</span> <span class="token attr-name" data-v-3d5d9371>greeting-text</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>hi<span class="token punctuation" data-v-3d5d9371>&quot;</span></span><span class="token punctuation" data-v-3d5d9371>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371></div></div></div> <h3 id="多个-attribute-的元素强烈推荐" data-v-3d5d9371><a href="#多个-attribute-的元素强烈推荐" class="header-anchor" data-v-3d5d9371>#</a> 多个 attribute 的元素<sup data-p="b" data-v-3d5d9371>强烈推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>多个 attribute 的元素应该分多行撰写，每个 attribute 一行。</strong></p> <p data-v-3d5d9371>在 JavaScript 中，用多行分隔对象的多个 property 是很常见的最佳实践，因为这样更易读。模板和 <a href="/guide/render-function.html#jsx" data-v-3d5d9371>JSX</a> 值得我们做相同的考虑。</p> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>img</span> <span class="token attr-name" data-v-3d5d9371>src</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>https://vuejs.org/images/logo.png<span class="token punctuation" data-v-3d5d9371>&quot;</span></span> <span class="token attr-name" data-v-3d5d9371>alt</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>Vue Logo<span class="token punctuation" data-v-3d5d9371>&quot;</span></span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>MyComponent</span> <span class="token attr-name" data-v-3d5d9371>foo</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>a<span class="token punctuation" data-v-3d5d9371>&quot;</span></span> <span class="token attr-name" data-v-3d5d9371>bar</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>b<span class="token punctuation" data-v-3d5d9371>&quot;</span></span> <span class="token attr-name" data-v-3d5d9371>baz</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>c<span class="token punctuation" data-v-3d5d9371>&quot;</span></span><span class="token punctuation" data-v-3d5d9371>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>img</span>
  <span class="token attr-name" data-v-3d5d9371>src</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>https://vuejs.org/images/logo.png<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token attr-name" data-v-3d5d9371>alt</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>Vue Logo<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
<span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>MyComponent</span>
  <span class="token attr-name" data-v-3d5d9371>foo</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>a<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token attr-name" data-v-3d5d9371>bar</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>b<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token attr-name" data-v-3d5d9371>baz</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>c<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
<span class="token punctuation" data-v-3d5d9371>/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371></div></div></div> <h3 id="模板中的简单表达式强烈推荐" data-v-3d5d9371><a href="#模板中的简单表达式强烈推荐" class="header-anchor" data-v-3d5d9371>#</a> 模板中的简单表达式<sup data-p="b" data-v-3d5d9371>强烈推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。</strong></p> <p data-v-3d5d9371>复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的<em data-v-3d5d9371>是</em>什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。</p> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371>{{
  fullName.split(' ').map((word) =&gt; {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>&lt;!-- 在模板中 --&gt;</span>
{{ normalizedFullName }}
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371></div></div><div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>// 复杂表达式已经移入一个计算属性</span>
computed<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token function" data-v-3d5d9371>normalizedFullName</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token keyword" data-v-3d5d9371>return</span> <span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>fullName<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>split</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>' '</span><span class="token punctuation" data-v-3d5d9371>)</span>
      <span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>map</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token parameter" data-v-3d5d9371>word</span> <span class="token operator" data-v-3d5d9371>=&gt;</span> word<span class="token punctuation" data-v-3d5d9371>[</span><span class="token number" data-v-3d5d9371>0</span><span class="token punctuation" data-v-3d5d9371>]</span><span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>toUpperCase</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token operator" data-v-3d5d9371>+</span> word<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>slice</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token number" data-v-3d5d9371>1</span><span class="token punctuation" data-v-3d5d9371>)</span><span class="token punctuation" data-v-3d5d9371>)</span>
      <span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>join</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>' '</span><span class="token punctuation" data-v-3d5d9371>)</span>
  <span class="token punctuation" data-v-3d5d9371>}</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371></div></div></div> <h3 id="简单的计算属性强烈推荐" data-v-3d5d9371><a href="#简单的计算属性强烈推荐" class="header-anchor" data-v-3d5d9371>#</a> 简单的计算属性<sup data-p="b" data-v-3d5d9371>强烈推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>应该把复杂计算属性分割为尽可能多的更简单的 property。</strong></p> <details class="custom-block details" data-v-3d5d9371><summary data-v-3d5d9371>详解</summary> <p data-v-3d5d9371>更简单、命名得当的计算属性是这样的：</p> <ul data-v-3d5d9371><li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>易于测试</strong></p> <p data-v-3d5d9371>当每个计算属性都包含一个非常简单且很少依赖的表达式时，撰写测试以确保其正确工作就会更加容易。</p></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>易于阅读</strong></p> <p data-v-3d5d9371>简化计算属性要求你为每一个值都起一个描述性的名称，即便它不可复用。这使得其他开发者 (以及未来的你) 更容易专注在他们关心的代码上并搞清楚发生了什么。</p></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>更好的“拥抱变化”</strong></p> <p data-v-3d5d9371>任何能够命名的值都可能用在视图上。举个例子，我们可能打算展示一个信息，告诉用户他们存了多少钱；也可能打算计算税费，但是可能会分开展现，而不是作为总价的一部分。</p> <p data-v-3d5d9371>小的、专注的计算属性减少了信息使用时的假设性限制，所以需求变更时也用不着那么多重构了。</p></li></ul></details> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371>computed<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token function" data-v-3d5d9371>price</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token keyword" data-v-3d5d9371>const</span> basePrice <span class="token operator" data-v-3d5d9371>=</span> <span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>manufactureCost <span class="token operator" data-v-3d5d9371>/</span> <span class="token punctuation" data-v-3d5d9371>(</span><span class="token number" data-v-3d5d9371>1</span> <span class="token operator" data-v-3d5d9371>-</span> <span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>profitMargin<span class="token punctuation" data-v-3d5d9371>)</span>
    <span class="token keyword" data-v-3d5d9371>return</span> <span class="token punctuation" data-v-3d5d9371>(</span>
      basePrice <span class="token operator" data-v-3d5d9371>-</span>
      basePrice <span class="token operator" data-v-3d5d9371>*</span> <span class="token punctuation" data-v-3d5d9371>(</span><span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>discountPercent <span class="token operator" data-v-3d5d9371>||</span> <span class="token number" data-v-3d5d9371>0</span><span class="token punctuation" data-v-3d5d9371>)</span>
    <span class="token punctuation" data-v-3d5d9371>)</span>
  <span class="token punctuation" data-v-3d5d9371>}</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371>computed<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token function" data-v-3d5d9371>basePrice</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token keyword" data-v-3d5d9371>return</span> <span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>manufactureCost <span class="token operator" data-v-3d5d9371>/</span> <span class="token punctuation" data-v-3d5d9371>(</span><span class="token number" data-v-3d5d9371>1</span> <span class="token operator" data-v-3d5d9371>-</span> <span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>profitMargin<span class="token punctuation" data-v-3d5d9371>)</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  <span class="token function" data-v-3d5d9371>discount</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token keyword" data-v-3d5d9371>return</span> <span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>basePrice <span class="token operator" data-v-3d5d9371>*</span> <span class="token punctuation" data-v-3d5d9371>(</span><span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>discountPercent <span class="token operator" data-v-3d5d9371>||</span> <span class="token number" data-v-3d5d9371>0</span><span class="token punctuation" data-v-3d5d9371>)</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  <span class="token function" data-v-3d5d9371>finalPrice</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token keyword" data-v-3d5d9371>return</span> <span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>basePrice <span class="token operator" data-v-3d5d9371>-</span> <span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>discount
  <span class="token punctuation" data-v-3d5d9371>}</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>10</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>11</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>12</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>13</span><br data-v-3d5d9371></div></div></div> <h3 id="带引号的-attribute-值强烈推荐" data-v-3d5d9371><a href="#带引号的-attribute-值强烈推荐" class="header-anchor" data-v-3d5d9371>#</a> 带引号的 attribute 值<sup data-p="b" data-v-3d5d9371>强烈推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>非空 HTML attribute 值应该始终带引号 (单引号或双引号，选你 JS 里不用的那个)。</strong></p> <p data-v-3d5d9371>在 HTML 中不带空格的 attribute 值是可以没有引号的，但这鼓励了大家在特征值里不写空格，导致可读性变差。</p> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>input</span> <span class="token attr-name" data-v-3d5d9371>type</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span>text</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371>&lt;AppSidebar :style={width:sidebarWidth+'px'}&gt;
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>input</span> <span class="token attr-name" data-v-3d5d9371>type</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>text<span class="token punctuation" data-v-3d5d9371>&quot;</span></span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>AppSidebar</span> <span class="token attr-name" data-v-3d5d9371>:style</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>{ width: sidebarWidth + <span class="token punctuation" data-v-3d5d9371>'</span>px<span class="token punctuation" data-v-3d5d9371>'</span> }<span class="token punctuation" data-v-3d5d9371>&quot;</span></span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371></div></div></div> <h3 id="指令缩写强烈推荐" data-v-3d5d9371><a href="#指令缩写强烈推荐" class="header-anchor" data-v-3d5d9371>#</a> 指令缩写<sup data-p="b" data-v-3d5d9371>强烈推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>指令缩写 (用 <code data-v-3d5d9371>:</code> 表示 <code data-v-3d5d9371>v-bind:</code>，<code data-v-3d5d9371>@</code> 表示 <code data-v-3d5d9371>v-on:</code> 和用 <code data-v-3d5d9371>#</code> 表示 <code data-v-3d5d9371>v-slot</code>) 应该要么都用要么都不用。</strong></p> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>input</span>
  <span class="token attr-name" data-v-3d5d9371><span class="token namespace" data-v-3d5d9371>v-bind:</span>value</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>newTodoText<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token attr-name" data-v-3d5d9371>:placeholder</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>newTodoInstructions<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
<span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>input</span>
  <span class="token attr-name" data-v-3d5d9371><span class="token namespace" data-v-3d5d9371>v-on:</span>input</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>onInput<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token attr-name" data-v-3d5d9371>@focus</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>onFocus<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
<span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span> <span class="token attr-name" data-v-3d5d9371><span class="token namespace" data-v-3d5d9371>v-slot:</span>header</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>h1</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>Here might be a page title<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>h1</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>

<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span> <span class="token attr-name" data-v-3d5d9371>#footer</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>p</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>Here's some contact info<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>p</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>input</span>
  <span class="token attr-name" data-v-3d5d9371>:value</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>newTodoText<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token attr-name" data-v-3d5d9371>:placeholder</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>newTodoInstructions<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
<span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>input</span>
  <span class="token attr-name" data-v-3d5d9371><span class="token namespace" data-v-3d5d9371>v-bind:</span>value</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>newTodoText<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token attr-name" data-v-3d5d9371><span class="token namespace" data-v-3d5d9371>v-bind:</span>placeholder</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>newTodoInstructions<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
<span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>input</span>
  <span class="token attr-name" data-v-3d5d9371>@input</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>onInput<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token attr-name" data-v-3d5d9371>@focus</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>onFocus<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
<span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>input</span>
  <span class="token attr-name" data-v-3d5d9371><span class="token namespace" data-v-3d5d9371>v-on:</span>input</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>onInput<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
  <span class="token attr-name" data-v-3d5d9371><span class="token namespace" data-v-3d5d9371>v-on:</span>focus</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>onFocus<span class="token punctuation" data-v-3d5d9371>&quot;</span></span>
<span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span> <span class="token attr-name" data-v-3d5d9371><span class="token namespace" data-v-3d5d9371>v-slot:</span>header</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>h1</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>Here might be a page title<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>h1</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>

<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span> <span class="token attr-name" data-v-3d5d9371><span class="token namespace" data-v-3d5d9371>v-slot:</span>footer</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>p</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>Here's some contact info<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>p</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span> <span class="token attr-name" data-v-3d5d9371>#header</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>h1</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>Here might be a page title<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>h1</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>

<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span> <span class="token attr-name" data-v-3d5d9371>#footer</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>p</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>Here's some contact info<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>p</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371></div></div></div> <h2 id="优先级-c-的规则-推荐-将选择和认知成本最小化" data-v-3d5d9371><a href="#优先级-c-的规则-推荐-将选择和认知成本最小化" class="header-anchor" data-v-3d5d9371>#</a> 优先级 C 的规则：推荐 <span class="hide-from-sidebar" data-v-3d5d9371>(将选择和认知成本最小化)</span></h2> <h3 id="组件-实例的选项顺序推荐" data-v-3d5d9371><a href="#组件-实例的选项顺序推荐" class="header-anchor" data-v-3d5d9371>#</a> 组件/实例的选项顺序<sup data-p="c" data-v-3d5d9371>推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>组件/实例的选项应该有统一的顺序。</strong></p> <p data-v-3d5d9371>这是我们推荐的组件选项默认顺序。它们被划分为几大类，所以你也能知道从插件里添加的新 property 应该放到哪里。</p> <ol data-v-3d5d9371><li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>全局感知</strong> (要求组件以外的知识)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>name</code></li></ul></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>模板依赖</strong> (模板内使用的资源)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>components</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>directives</code></li></ul></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>组合</strong> (向选项里合并 property)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>extends</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>mixins</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>provide</code>/<code data-v-3d5d9371>inject</code></li></ul></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>接口</strong> (组件的接口)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>inheritAttrs</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>props</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>emits</code></li></ul></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>组合式 API</strong> (使用组合式 API 的入口点)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>setup</code></li></ul></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>本地状态</strong> (本地的响应式 property)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>data</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>computed</code></li></ul></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>事件</strong> (通过响应式事件触发的回调)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>watch</code></li> <li data-v-3d5d9371>生命周期钩子 (按照它们被调用的顺序)
<ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>beforeCreate</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>created</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>beforeMount</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>mounted</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>beforeUpdate</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>updated</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>activated</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>deactivated</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>beforeUnmount</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>unmounted</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>errorCaptured</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>renderTracked</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>renderTriggered</code></li></ul></li></ul></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>非响应式的 property</strong> (不依赖响应性系统的实例 property)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>methods</code></li></ul></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>渲染</strong> (组件输出的声明式描述)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>template</code>/<code data-v-3d5d9371>render</code></li></ul></li></ol> <h3 id="元素-attribute-的顺序推荐" data-v-3d5d9371><a href="#元素-attribute-的顺序推荐" class="header-anchor" data-v-3d5d9371>#</a> 元素 attribute 的顺序<sup data-p="c" data-v-3d5d9371>推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>元素 (包括组件) 的 attribute 应该有统一的顺序。</strong></p> <p data-v-3d5d9371>这是我们为组件选项推荐的默认顺序。它们被划分为几大类，所以你也能知道新添加的自定义 attribute 和指令应该放到哪里。</p> <ol data-v-3d5d9371><li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>定义</strong> (提供组件的选项)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>is</code></li></ul></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>列表渲染</strong> (创建多个变化的相同元素)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>v-for</code></li></ul></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>条件渲染</strong> (元素是否渲染/显示)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>v-if</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>v-else-if</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>v-else</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>v-show</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>v-cloak</code></li></ul></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>渲染修饰符</strong> (改变元素的渲染方式)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>v-pre</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>v-once</code></li></ul></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>全局感知</strong> (需要超越组件的知识)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>id</code></li></ul></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>唯一的 Attributes</strong> (需要唯一值的 attribute)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>ref</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>key</code></li></ul></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>双向绑定</strong> (把绑定和事件结合起来)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>v-model</code></li></ul></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>其他 Attributes</strong> (所有普通的绑定或未绑定的 attribute)</p></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>事件</strong> (组件事件监听器)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>v-on</code></li></ul></li> <li data-v-3d5d9371><p data-v-3d5d9371><strong data-v-3d5d9371>内容</strong> (覆写元素的内容)</p> <ul data-v-3d5d9371><li data-v-3d5d9371><code data-v-3d5d9371>v-html</code></li> <li data-v-3d5d9371><code data-v-3d5d9371>v-text</code></li></ul></li></ol> <h3 id="组件-实例选项中的空行推荐" data-v-3d5d9371><a href="#组件-实例选项中的空行推荐" class="header-anchor" data-v-3d5d9371>#</a> 组件/实例选项中的空行<sup data-p="c" data-v-3d5d9371>推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>你可能想在多个 property 之间增加一个空行，特别是在这些选项一屏放不下，需要滚动才能都看到的时候。</strong></p> <p data-v-3d5d9371>当你的组件开始觉得密集或难以阅读时，在多个 property 之间添加空行可以让其变得容易。在一些诸如 Vim 的编辑器里，这样格式化后的选项还能通过键盘被快速导航。</p> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371>props<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  value<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    type<span class="token operator" data-v-3d5d9371>:</span> String<span class="token punctuation" data-v-3d5d9371>,</span>
    required<span class="token operator" data-v-3d5d9371>:</span> <span class="token boolean" data-v-3d5d9371>true</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  focused<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    type<span class="token operator" data-v-3d5d9371>:</span> Boolean<span class="token punctuation" data-v-3d5d9371>,</span>
    <span class="token keyword" data-v-3d5d9371>default</span><span class="token operator" data-v-3d5d9371>:</span> <span class="token boolean" data-v-3d5d9371>false</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  label<span class="token operator" data-v-3d5d9371>:</span> String<span class="token punctuation" data-v-3d5d9371>,</span>
  icon<span class="token operator" data-v-3d5d9371>:</span> String
<span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

computed<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token function" data-v-3d5d9371>formattedValue</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token comment" data-v-3d5d9371>// ...</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  <span class="token function" data-v-3d5d9371>inputClasses</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token comment" data-v-3d5d9371>// ...</span>
  <span class="token punctuation" data-v-3d5d9371>}</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>10</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>11</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>12</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>13</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>14</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>15</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>16</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>17</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>18</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>19</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>20</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>21</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>22</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>23</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>24</span><br data-v-3d5d9371></div></div><div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>// 没有空行在组件易于阅读和导航时也没问题。</span>
props<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  value<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    type<span class="token operator" data-v-3d5d9371>:</span> String<span class="token punctuation" data-v-3d5d9371>,</span>
    required<span class="token operator" data-v-3d5d9371>:</span> <span class="token boolean" data-v-3d5d9371>true</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  focused<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    type<span class="token operator" data-v-3d5d9371>:</span> Boolean<span class="token punctuation" data-v-3d5d9371>,</span>
    <span class="token keyword" data-v-3d5d9371>default</span><span class="token operator" data-v-3d5d9371>:</span> <span class="token boolean" data-v-3d5d9371>false</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  label<span class="token operator" data-v-3d5d9371>:</span> String<span class="token punctuation" data-v-3d5d9371>,</span>
  icon<span class="token operator" data-v-3d5d9371>:</span> String
<span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

computed<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token function" data-v-3d5d9371>formattedValue</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token comment" data-v-3d5d9371>// ...</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  <span class="token function" data-v-3d5d9371>inputClasses</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token comment" data-v-3d5d9371>// ...</span>
  <span class="token punctuation" data-v-3d5d9371>}</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>10</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>11</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>12</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>13</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>14</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>15</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>16</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>17</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>18</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>19</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>20</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>21</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>22</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>23</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>24</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>25</span><br data-v-3d5d9371></div></div></div> <h3 id="单文件组件的顶级元素的顺序推荐" data-v-3d5d9371><a href="#单文件组件的顶级元素的顺序推荐" class="header-anchor" data-v-3d5d9371>#</a> 单文件组件的顶级元素的顺序<sup data-p="c" data-v-3d5d9371>推荐</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371><a href="/guide/single-file-component.html" data-v-3d5d9371>单文件组件</a>应该总是让 <code data-v-3d5d9371>&lt;script&gt;</code>、<code data-v-3d5d9371>&lt;template&gt;</code> 和 <code data-v-3d5d9371>&lt;style&gt;</code> 标签的顺序保持一致。且 <code data-v-3d5d9371>&lt;style&gt;</code> 要放在最后，因为另外两个标签至少要有一个。</strong></p> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token style" data-v-3d5d9371><span class="token language-css" data-v-3d5d9371><span class="token comment" data-v-3d5d9371>/* ... */</span></span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>script</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token script" data-v-3d5d9371><span class="token language-javascript" data-v-3d5d9371><span class="token comment" data-v-3d5d9371>/* ... */</span></span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>script</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>...<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>&lt;!-- ComponentA.vue --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>script</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token script" data-v-3d5d9371><span class="token language-javascript" data-v-3d5d9371><span class="token comment" data-v-3d5d9371>/* ... */</span></span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>script</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>...<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token style" data-v-3d5d9371><span class="token language-css" data-v-3d5d9371><span class="token comment" data-v-3d5d9371>/* ... */</span></span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>

<span class="token comment" data-v-3d5d9371>&lt;!-- ComponentB.vue --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>...<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>script</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token script" data-v-3d5d9371><span class="token language-javascript" data-v-3d5d9371><span class="token comment" data-v-3d5d9371>/* ... */</span></span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>script</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token style" data-v-3d5d9371><span class="token language-css" data-v-3d5d9371><span class="token comment" data-v-3d5d9371>/* ... */</span></span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>&lt;!-- ComponentA.vue --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>script</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token script" data-v-3d5d9371><span class="token language-javascript" data-v-3d5d9371><span class="token comment" data-v-3d5d9371>/* ... */</span></span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>script</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>...<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token style" data-v-3d5d9371><span class="token language-css" data-v-3d5d9371><span class="token comment" data-v-3d5d9371>/* ... */</span></span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>

<span class="token comment" data-v-3d5d9371>&lt;!-- ComponentB.vue --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>script</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token script" data-v-3d5d9371><span class="token language-javascript" data-v-3d5d9371><span class="token comment" data-v-3d5d9371>/* ... */</span></span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>script</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>...<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token style" data-v-3d5d9371><span class="token language-css" data-v-3d5d9371><span class="token comment" data-v-3d5d9371>/* ... */</span></span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>&lt;!-- ComponentA.vue --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>...<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>script</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token script" data-v-3d5d9371><span class="token language-javascript" data-v-3d5d9371><span class="token comment" data-v-3d5d9371>/* ... */</span></span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>script</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token style" data-v-3d5d9371><span class="token language-css" data-v-3d5d9371><span class="token comment" data-v-3d5d9371>/* ... */</span></span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>

<span class="token comment" data-v-3d5d9371>&lt;!-- ComponentB.vue --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>...<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>script</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token script" data-v-3d5d9371><span class="token language-javascript" data-v-3d5d9371><span class="token comment" data-v-3d5d9371>/* ... */</span></span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>script</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token style" data-v-3d5d9371><span class="token language-css" data-v-3d5d9371><span class="token comment" data-v-3d5d9371>/* ... */</span></span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371></div></div></div> <h2 id="优先级-d-的规则-谨慎使用-潜在风险" data-v-3d5d9371><a href="#优先级-d-的规则-谨慎使用-潜在风险" class="header-anchor" data-v-3d5d9371>#</a> 优先级 D 的规则：谨慎使用 <span class="hide-from-sidebar" data-v-3d5d9371>(潜在风险)</span></h2> <h3 id="scoped-中的元素选择器谨慎使用" data-v-3d5d9371><a href="#scoped-中的元素选择器谨慎使用" class="header-anchor" data-v-3d5d9371>#</a> <code data-v-3d5d9371>scoped</code> 中的元素选择器<sup data-p="d" data-v-3d5d9371>谨慎使用</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>元素选择器应该避免在 <code data-v-3d5d9371>scoped</code> 中出现。</strong></p> <p data-v-3d5d9371>在 <code data-v-3d5d9371>scoped</code> 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。</p> <details class="custom-block details" data-v-3d5d9371><summary data-v-3d5d9371>详解</summary> <p data-v-3d5d9371>为了给样式设置作用域，Vue 会为元素添加一个独一无二的 attribute，例如 <code data-v-3d5d9371>data-v-f3f3eg9</code>。然后修改选择器，使得在匹配选择器的元素中，只有带这个 attribute 才会真正生效 (比如 <code data-v-3d5d9371>button[data-v-f3f3eg9]</code>)。</p> <p data-v-3d5d9371>问题在于大量的<a href="http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&amp;sel=a%5Bhref%5D&amp;body=background%3A+%23CFD&amp;ne=1000" target="_blank" rel="noopener noreferrer" data-v-3d5d9371>元素和 attribute 组合的选择器<span data-v-3d5d9371><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> (比如 <code data-v-3d5d9371>button[data-v-f3f3eg9]</code>) 会比<a href="http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&amp;sel=.class%5Bhref%5D&amp;body=background%3A+%23CFD&amp;ne=1000" target="_blank" rel="noopener noreferrer" data-v-3d5d9371>类和 attribute 组合的选择器<span data-v-3d5d9371><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>慢，所以应该尽可能选用类选择器。</p></details> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>button</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>×<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>button</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>

<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>style</span> <span class="token attr-name" data-v-3d5d9371>scoped</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token style" data-v-3d5d9371><span class="token language-css" data-v-3d5d9371>
<span class="token selector" data-v-3d5d9371>button</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token property" data-v-3d5d9371>background-color</span><span class="token punctuation" data-v-3d5d9371>:</span> red<span class="token punctuation" data-v-3d5d9371>;</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>button</span> <span class="token attr-name" data-v-3d5d9371>class</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>btn btn-close<span class="token punctuation" data-v-3d5d9371>&quot;</span></span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>×<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>button</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>

<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>style</span> <span class="token attr-name" data-v-3d5d9371>scoped</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token style" data-v-3d5d9371><span class="token language-css" data-v-3d5d9371>
<span class="token selector" data-v-3d5d9371>.btn-close</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token property" data-v-3d5d9371>background-color</span><span class="token punctuation" data-v-3d5d9371>:</span> red<span class="token punctuation" data-v-3d5d9371>;</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>style</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371></div></div></div> <h3 id="隐性的父子组件通信谨慎使用" data-v-3d5d9371><a href="#隐性的父子组件通信谨慎使用" class="header-anchor" data-v-3d5d9371>#</a> 隐性的父子组件通信<sup data-p="d" data-v-3d5d9371>谨慎使用</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>应该优先通过 prop 和事件进行父子组件之间的通信，而不是 <code data-v-3d5d9371>this.$parent</code> 或变更 prop。</strong></p> <p data-v-3d5d9371>一个理想的 Vue 应用是 prop 向下传递，事件向上传递的。遵循这一约定会让你的组件更易于理解。然而，在一些边界情况下 prop 的变更或 <code data-v-3d5d9371>this.$parent</code> 能够简化两个深度耦合的组件。</p> <p data-v-3d5d9371>问题在于，这种做法在很多<em data-v-3d5d9371>简单</em>的场景下可能会更方便。但请当心，不要为了一时方便 (少写代码) 而牺牲数据流向的简洁性 (易于理解)。</p> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371>app<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>component</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>'TodoItem'</span><span class="token punctuation" data-v-3d5d9371>,</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  props<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    todo<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
      type<span class="token operator" data-v-3d5d9371>:</span> Object<span class="token punctuation" data-v-3d5d9371>,</span>
      required<span class="token operator" data-v-3d5d9371>:</span> <span class="token boolean" data-v-3d5d9371>true</span>
    <span class="token punctuation" data-v-3d5d9371>}</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  template<span class="token operator" data-v-3d5d9371>:</span> <span class="token string" data-v-3d5d9371>'<span class="language-html" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>input</span> <span class="token directive" data-v-3d5d9371><span class="token identifier directive-name" data-v-3d5d9371>v-model</span><span class="token directive-expression" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span><span class="token inline-js language-js" data-v-3d5d9371>todo<span class="token punctuation" data-v-3d5d9371>.</span>text</span><span class="token punctuation" data-v-3d5d9371>&quot;</span></span></span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span></span>'</span>
<span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>10</span><br data-v-3d5d9371></div></div><div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371>app<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>component</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>'TodoItem'</span><span class="token punctuation" data-v-3d5d9371>,</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  props<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    todo<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
      type<span class="token operator" data-v-3d5d9371>:</span> Object<span class="token punctuation" data-v-3d5d9371>,</span>
      required<span class="token operator" data-v-3d5d9371>:</span> <span class="token boolean" data-v-3d5d9371>true</span>
    <span class="token punctuation" data-v-3d5d9371>}</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  methods<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token function" data-v-3d5d9371>removeTodo</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
      <span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>$parent<span class="token punctuation" data-v-3d5d9371>.</span>todos <span class="token operator" data-v-3d5d9371>=</span> <span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>$parent<span class="token punctuation" data-v-3d5d9371>.</span>todos<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>filter</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token parameter" data-v-3d5d9371>todo</span> <span class="token operator" data-v-3d5d9371>=&gt;</span> todo<span class="token punctuation" data-v-3d5d9371>.</span>id <span class="token operator" data-v-3d5d9371>!==</span> vm<span class="token punctuation" data-v-3d5d9371>.</span>todo<span class="token punctuation" data-v-3d5d9371>.</span>id<span class="token punctuation" data-v-3d5d9371>)</span>
    <span class="token punctuation" data-v-3d5d9371>}</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  template<span class="token operator" data-v-3d5d9371>:</span> <span class="token template-string" data-v-3d5d9371><span class="token template-punctuation string" data-v-3d5d9371>`</span><span class="token string" data-v-3d5d9371><span class="language-html" data-v-3d5d9371>
    <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>span</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
      <span class="token interpolation" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>{{</span><span class="token inline-js language-js" data-v-3d5d9371> todo<span class="token punctuation" data-v-3d5d9371>.</span>text </span><span class="token punctuation" data-v-3d5d9371>}}</span></span>
      <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>button</span> <span class="token directive" data-v-3d5d9371><span class="token punctuation directive-shorthand" data-v-3d5d9371>@</span><span class="token directive-modifier" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>c</span><span class="token punctuation" data-v-3d5d9371>l</span><span class="token punctuation" data-v-3d5d9371>i</span><span class="token punctuation" data-v-3d5d9371>c</span><span class="token punctuation" data-v-3d5d9371>k</span></span><span class="token directive-expression" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span><span class="token inline-js language-js" data-v-3d5d9371>removeTodo</span><span class="token punctuation" data-v-3d5d9371>&quot;</span></span></span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
        ×
      <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>button</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
    <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>span</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  </span></span><span class="token template-punctuation string" data-v-3d5d9371>`</span></span>
<span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>10</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>11</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>12</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>13</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>14</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>15</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>16</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>17</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>18</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>19</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>20</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>21</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>22</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>23</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371>app<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>component</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>'TodoItem'</span><span class="token punctuation" data-v-3d5d9371>,</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  props<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    todo<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
      type<span class="token operator" data-v-3d5d9371>:</span> Object<span class="token punctuation" data-v-3d5d9371>,</span>
      required<span class="token operator" data-v-3d5d9371>:</span> <span class="token boolean" data-v-3d5d9371>true</span>
    <span class="token punctuation" data-v-3d5d9371>}</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  template<span class="token operator" data-v-3d5d9371>:</span> <span class="token template-string" data-v-3d5d9371><span class="token template-punctuation string" data-v-3d5d9371>`</span><span class="token string" data-v-3d5d9371><span class="language-html" data-v-3d5d9371>
    <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>input</span>
      <span class="token directive" data-v-3d5d9371><span class="token punctuation directive-shorthand" data-v-3d5d9371>:</span><span class="token directive-modifier" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>v</span><span class="token punctuation" data-v-3d5d9371>a</span><span class="token punctuation" data-v-3d5d9371>l</span><span class="token punctuation" data-v-3d5d9371>u</span><span class="token punctuation" data-v-3d5d9371>e</span></span><span class="token directive-expression" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span><span class="token inline-js language-js" data-v-3d5d9371>todo<span class="token punctuation" data-v-3d5d9371>.</span>text</span><span class="token punctuation" data-v-3d5d9371>&quot;</span></span></span>
      <span class="token directive" data-v-3d5d9371><span class="token punctuation directive-shorthand" data-v-3d5d9371>@</span><span class="token directive-modifier" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>i</span><span class="token punctuation" data-v-3d5d9371>n</span><span class="token punctuation" data-v-3d5d9371>p</span><span class="token punctuation" data-v-3d5d9371>u</span><span class="token punctuation" data-v-3d5d9371>t</span></span><span class="token directive-expression" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span><span class="token inline-js language-js" data-v-3d5d9371><span class="token function" data-v-3d5d9371>$emit</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>'input'</span><span class="token punctuation" data-v-3d5d9371>,</span> $event<span class="token punctuation" data-v-3d5d9371>.</span>target<span class="token punctuation" data-v-3d5d9371>.</span>value<span class="token punctuation" data-v-3d5d9371>)</span></span><span class="token punctuation" data-v-3d5d9371>&quot;</span></span></span>
    <span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  </span></span><span class="token template-punctuation string" data-v-3d5d9371>`</span></span>
<span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>10</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>11</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>12</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>13</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>14</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>15</span><br data-v-3d5d9371></div></div><div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371>app<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>component</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>'TodoItem'</span><span class="token punctuation" data-v-3d5d9371>,</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  props<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    todo<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
      type<span class="token operator" data-v-3d5d9371>:</span> Object<span class="token punctuation" data-v-3d5d9371>,</span>
      required<span class="token operator" data-v-3d5d9371>:</span> <span class="token boolean" data-v-3d5d9371>true</span>
    <span class="token punctuation" data-v-3d5d9371>}</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  template<span class="token operator" data-v-3d5d9371>:</span> <span class="token template-string" data-v-3d5d9371><span class="token template-punctuation string" data-v-3d5d9371>`</span><span class="token string" data-v-3d5d9371><span class="language-html" data-v-3d5d9371>
    <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>span</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
      <span class="token interpolation" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>{{</span><span class="token inline-js language-js" data-v-3d5d9371> todo<span class="token punctuation" data-v-3d5d9371>.</span>text </span><span class="token punctuation" data-v-3d5d9371>}}</span></span>
      <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>button</span> <span class="token directive" data-v-3d5d9371><span class="token punctuation directive-shorthand" data-v-3d5d9371>@</span><span class="token directive-modifier" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>c</span><span class="token punctuation" data-v-3d5d9371>l</span><span class="token punctuation" data-v-3d5d9371>i</span><span class="token punctuation" data-v-3d5d9371>c</span><span class="token punctuation" data-v-3d5d9371>k</span></span><span class="token directive-expression" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span><span class="token inline-js language-js" data-v-3d5d9371><span class="token function" data-v-3d5d9371>$emit</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>'delete'</span><span class="token punctuation" data-v-3d5d9371>)</span></span><span class="token punctuation" data-v-3d5d9371>&quot;</span></span></span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
        ×
      <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>button</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
    <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>span</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  </span></span><span class="token template-punctuation string" data-v-3d5d9371>`</span></span>
<span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>10</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>11</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>12</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>13</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>14</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>15</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>16</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>17</span><br data-v-3d5d9371></div></div></div> <h3 id="非-flux-的全局状态管理谨慎使用" data-v-3d5d9371><a href="#非-flux-的全局状态管理谨慎使用" class="header-anchor" data-v-3d5d9371>#</a> 非 Flux 的全局状态管理<sup data-p="d" data-v-3d5d9371>谨慎使用</sup></h3> <p data-v-3d5d9371><strong data-v-3d5d9371>应该优先通过 <a href="https://next.vuex.vuejs.org/" target="_blank" rel="noopener noreferrer" data-v-3d5d9371>Vuex<span data-v-3d5d9371><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 管理全局状态，而不是通过 <code data-v-3d5d9371>this.$root</code> 或一个全局事件总线。</strong></p> <p data-v-3d5d9371>通过 <code data-v-3d5d9371>this.$root</code> 和/或全局事件总线管理状态在很多简单的情况下都是很方便的，但是并不适用于绝大多数的应用。</p> <p data-v-3d5d9371>Vuex 是 Vue 的<a href="/guide/state-management.html#类-flux-状态管理的官方实现" data-v-3d5d9371>官方类 flux 实现</a>，其提供的不仅是一个管理状态的中心区域，还是组织、追踪和调试状态变更的好工具。它很好地集成在了 Vue 生态系统之中 (包括完整的 <a href="/guide/installation.html#vue-devtools" data-v-3d5d9371>Vue DevTools</a> 支持)。</p> <div class="style-example style-example-bad" data-v-3d5d9371><h4 data-v-3d5d9371>反例</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>// main.js</span>
<span class="token keyword" data-v-3d5d9371>import</span> <span class="token punctuation" data-v-3d5d9371>{</span> createApp <span class="token punctuation" data-v-3d5d9371>}</span> <span class="token keyword" data-v-3d5d9371>from</span> <span class="token string" data-v-3d5d9371>'vue'</span>
<span class="token keyword" data-v-3d5d9371>import</span> mitt <span class="token keyword" data-v-3d5d9371>from</span> <span class="token string" data-v-3d5d9371>'mitt'</span>
<span class="token keyword" data-v-3d5d9371>const</span> app <span class="token operator" data-v-3d5d9371>=</span> <span class="token function" data-v-3d5d9371>createApp</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>{</span>
  <span class="token function" data-v-3d5d9371>data</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token keyword" data-v-3d5d9371>return</span> <span class="token punctuation" data-v-3d5d9371>{</span>
      todos<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>[</span><span class="token punctuation" data-v-3d5d9371>]</span><span class="token punctuation" data-v-3d5d9371>,</span>
      emitter<span class="token operator" data-v-3d5d9371>:</span> <span class="token function" data-v-3d5d9371>mitt</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span>
    <span class="token punctuation" data-v-3d5d9371>}</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  <span class="token function" data-v-3d5d9371>created</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>emitter<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>on</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>'remove-todo'</span><span class="token punctuation" data-v-3d5d9371>,</span> <span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>removeTodo<span class="token punctuation" data-v-3d5d9371>)</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  methods<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token function" data-v-3d5d9371>removeTodo</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token parameter" data-v-3d5d9371>todo</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
      <span class="token keyword" data-v-3d5d9371>const</span> todoIdToRemove <span class="token operator" data-v-3d5d9371>=</span> todo<span class="token punctuation" data-v-3d5d9371>.</span>id
      <span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>todos <span class="token operator" data-v-3d5d9371>=</span> <span class="token keyword" data-v-3d5d9371>this</span><span class="token punctuation" data-v-3d5d9371>.</span>todos<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>filter</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token parameter" data-v-3d5d9371>todo</span> <span class="token operator" data-v-3d5d9371>=&gt;</span> todo<span class="token punctuation" data-v-3d5d9371>.</span>id <span class="token operator" data-v-3d5d9371>!==</span> todoIdToRemove<span class="token punctuation" data-v-3d5d9371>)</span>
    <span class="token punctuation" data-v-3d5d9371>}</span>
  <span class="token punctuation" data-v-3d5d9371>}</span>
<span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>)</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>10</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>11</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>12</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>13</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>14</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>15</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>16</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>17</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>18</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>19</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>20</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>21</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>22</span><br data-v-3d5d9371></div></div></div> <div class="style-example style-example-good" data-v-3d5d9371><h4 data-v-3d5d9371>好例子</h4> <div class="language-js line-numbers-mode" data-v-3d5d9371><pre class="language-js" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>// store/modules/todos.js</span>
<span class="token keyword" data-v-3d5d9371>export</span> <span class="token keyword" data-v-3d5d9371>default</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  state<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    list<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>[</span><span class="token punctuation" data-v-3d5d9371>]</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  mutations<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token constant" data-v-3d5d9371>REMOVE_TODO</span> <span class="token punctuation" data-v-3d5d9371>(</span><span class="token parameter" data-v-3d5d9371>state<span class="token punctuation" data-v-3d5d9371>,</span> todoId</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
      state<span class="token punctuation" data-v-3d5d9371>.</span>list <span class="token operator" data-v-3d5d9371>=</span> state<span class="token punctuation" data-v-3d5d9371>.</span>list<span class="token punctuation" data-v-3d5d9371>.</span><span class="token function" data-v-3d5d9371>filter</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token parameter" data-v-3d5d9371>todo</span> <span class="token operator" data-v-3d5d9371>=&gt;</span> todo<span class="token punctuation" data-v-3d5d9371>.</span>id <span class="token operator" data-v-3d5d9371>!==</span> todoId<span class="token punctuation" data-v-3d5d9371>)</span>
    <span class="token punctuation" data-v-3d5d9371>}</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  actions<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    <span class="token function" data-v-3d5d9371>removeTodo</span> <span class="token punctuation" data-v-3d5d9371>(</span><span class="token parameter" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>{</span> commit<span class="token punctuation" data-v-3d5d9371>,</span> state <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span> todo</span><span class="token punctuation" data-v-3d5d9371>)</span> <span class="token punctuation" data-v-3d5d9371>{</span>
      <span class="token function" data-v-3d5d9371>commit</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token string" data-v-3d5d9371>'REMOVE_TODO'</span><span class="token punctuation" data-v-3d5d9371>,</span> todo<span class="token punctuation" data-v-3d5d9371>.</span>id<span class="token punctuation" data-v-3d5d9371>)</span>
    <span class="token punctuation" data-v-3d5d9371>}</span>
  <span class="token punctuation" data-v-3d5d9371>}</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>10</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>11</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>12</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>13</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>14</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>15</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>16</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>17</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>18</span><br data-v-3d5d9371></div></div><div class="language-html line-numbers-mode" data-v-3d5d9371><pre class="language-html" data-v-3d5d9371><code data-v-3d5d9371><span class="token comment" data-v-3d5d9371>&lt;!-- TodoItem.vue --&gt;</span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>span</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
    {{ todo.text }}
    <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>button</span> <span class="token attr-name" data-v-3d5d9371>@click</span><span class="token attr-value" data-v-3d5d9371><span class="token punctuation attr-equals" data-v-3d5d9371>=</span><span class="token punctuation" data-v-3d5d9371>&quot;</span>removeTodo(todo)<span class="token punctuation" data-v-3d5d9371>&quot;</span></span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
      X
    <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>button</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
  <span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>span</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>template</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>

<span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;</span>script</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span><span class="token script" data-v-3d5d9371><span class="token language-javascript" data-v-3d5d9371>
<span class="token keyword" data-v-3d5d9371>import</span> <span class="token punctuation" data-v-3d5d9371>{</span> mapActions <span class="token punctuation" data-v-3d5d9371>}</span> <span class="token keyword" data-v-3d5d9371>from</span> <span class="token string" data-v-3d5d9371>'vuex'</span>

<span class="token keyword" data-v-3d5d9371>export</span> <span class="token keyword" data-v-3d5d9371>default</span> <span class="token punctuation" data-v-3d5d9371>{</span>
  props<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
    todo<span class="token operator" data-v-3d5d9371>:</span> <span class="token punctuation" data-v-3d5d9371>{</span>
      type<span class="token operator" data-v-3d5d9371>:</span> Object<span class="token punctuation" data-v-3d5d9371>,</span>
      required<span class="token operator" data-v-3d5d9371>:</span> <span class="token boolean" data-v-3d5d9371>true</span>
    <span class="token punctuation" data-v-3d5d9371>}</span>
  <span class="token punctuation" data-v-3d5d9371>}</span><span class="token punctuation" data-v-3d5d9371>,</span>

  methods<span class="token operator" data-v-3d5d9371>:</span> <span class="token function" data-v-3d5d9371>mapActions</span><span class="token punctuation" data-v-3d5d9371>(</span><span class="token punctuation" data-v-3d5d9371>[</span><span class="token string" data-v-3d5d9371>'removeTodo'</span><span class="token punctuation" data-v-3d5d9371>]</span><span class="token punctuation" data-v-3d5d9371>)</span>
<span class="token punctuation" data-v-3d5d9371>}</span>
</span></span><span class="token tag" data-v-3d5d9371><span class="token tag" data-v-3d5d9371><span class="token punctuation" data-v-3d5d9371>&lt;/</span>script</span><span class="token punctuation" data-v-3d5d9371>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-3d5d9371><span class="line-number" data-v-3d5d9371>1</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>2</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>3</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>4</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>5</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>6</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>7</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>8</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>9</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>10</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>11</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>12</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>13</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>14</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>15</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>16</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>17</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>18</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>19</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>20</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>21</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>22</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>23</span><br data-v-3d5d9371><span class="line-number" data-v-3d5d9371>24</span><br data-v-3d5d9371></div></div></div></div> <!----> </main></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.8e9a370d.js" defer></script><script src="/assets/js/11.282d7961.js" defer></script><script src="/assets/js/33.5e981f72.js" defer></script><script src="/assets/js/22.0b365510.js" defer></script>
  </body>
</html>
